Button Settings

Features

The settings are divided into five categories (General, Layout, Style, Color and Actions) covered in the following sections.

General

The General section features following options:

Type

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.

State

The State list is a sub-list of the Type list and covers the normal, active and disabled state of the previously chosen type.

Text

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).

Tooltip

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.

Icon

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.

Icon size

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.

Image type

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.

Background repetition

If you defined a background on your button you can control how the background is repeated with the Repeat setting in the Background section.

Size

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.

Position

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.

Custom type

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.

Layout

The Layout section is for defining the metrics of the button. You can set…

Dimension

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.

Position

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%.

Content alignment

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.

Content position

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.

Padding

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.

Margin

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.

Style

In the Style section, you can set the visual appearance of the button’s content including:

Font settings

In the Font section, you can set the font properties, i.e. Family, Weight, Style, and Size.

Border

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.

Shadow

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 syntax: none|h-shadow v-shadow blur spread color |inset|initial|inherit.

Color

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.