The settings are divided into five categories (General, Layout, Style, Color and Actions) covered in the following sections.
The General section features following options:
The Type list gives you a selection of various predefined button appearances, all of which can be fine-tuned in the adjacent settings sections. Apart from that, you can choose between simple, image, and custom in the General section. The latter two of which can be used to create an image-based or custom-CSS-based button respectively.
The State list is a sub-list of the Type list and covers the normal, active and disabled state of the previously chosen type.
The Text field is the text used as the label on the button. It can be plain text or a custom HTML source code (with some restrictions for safety reasons).
With the Tooltip option, you can define the text shown when the user hovers over the button.
Help other users to understand your button’s effect by describing it in the tooltip.
Using the Icon option you can define an additional icon for the button out of the Font Awesome or Leonardo UI (Qlik Sense) icon repository.
Icons have a fixed size, but you can change the scaling in the Icon section using the Size slider to choose between 1x, 1.5x, 2x, 3x, 4x or 5x.
If you’ve chosen the image type you can additionally define an Image url, the Background repeat mode, Position, and Size of your background image in the Image section.
If you defined a background on your button you can control how the background is repeated with the Repeat setting in the Background section.
The size value can be any valid CSS value of background-size style property. You can choose one of the predefined values from the list, or set it manually. If you use numerical values (with proper unit: i.e. px/%/em) the first value will be the width and the second value will be the height of the image.
With the position settings you can define the position of the image respectively, which has a visible effect only if the size of the image is smaller then button’s dimension.
If you’ve chosen the custom type you can define your own CSS rules on the button, giving you the maximal flexibility for the button’s appearance.
The CSS code can be written as plain CSS or as an expression. Writing it as expression gives you the possibility to use variables which leads to even more flexibility.
The Layout section is for defining the metrics of the button. You can set…
In the Dimension section, you can set the width and height of the button inside its boundaries. This is set to 100% by default (for the simple, image and custom type) but can be set to any value using CSS units or auto to make the button as large as its contents demands.
In the Position section, you can set the horizontal and vertical alignment of the button inside its boundaries, which is only effective if the respective width or height is set to a value other than 100%.
In the Content alignment section, you can define the alignment of the button’s text and the icon. The Text alignment is only effective for multiple lines of text on the button.
In the Content position section, you can set the horizontal and vertical alignment of the content itself (i.e. the text and the icon together). This is only effective if the respective width or height of the button is not set to auto.
With the Padding setting, you can disable a predefined padding by choosing Off or override the default padding by choosing On which allows you to set the values in CSS padding syntax.
With the Margin setting, you can disable a predefined margin by choosing Off or override the default margin by choosing On which allows you to set the values in CSS margin syntax.
|Default values for padding and margin are just examples and do not reflect currently effective setting.|
In the Style section, you can set the visual appearance of the button’s content including:
In the Font section, you can set the font properties, i.e. Family, Weight, Style, and Size.
With the Border setting, you can disable a predefined border by choosing Off or override the default border by choosing On which allows you to set the border’s color, radius, width, and style. The radius is given in CSS border-radius syntax.
The same applies for the button’s shadow in the Shadow section. By using
On you can define a custom border according to the CSS box-shadow
none|h-shadow v-shadow blur spread color |inset|initial|inherit.
The Color section is used to set the colors for the normal and hover state of the button. This overrides the colors you’ve set in the Colors section of the Appearance pane and those given by the button type in the General section of button settings. For a detailed list of accepted color expressions, refer to Appendix A.1.