Buttons
Composition variations
Defines the core composition of the button.
Variation with a notification pill
Defines a notification pill in the button or attached to it.
Variation with a tooltip
Defines a tooltip attached to the button.
With tooltip
This is a helper box
The dialog box will position itself where there is the more space available.
Appearance variations
Defines the appearance of the button.
Size variations
Defines the size of the button.
Dark theme variations
Defines the appearance on dark theme.
List of arguments for buttons
| Argument | Type | Description | Possible Values |
|---|---|---|---|
| label | string | The text label of the button. | — |
| href | string | The URL the button links to. | — |
| target | array | Specifies where to open the linked document. | _self, _blank |
| skin | array | Defines the visual style of the button. | primary, secondary, transparent, warning, like |
| disabled | boolean | Indicates whether the button is disabled. | — |
| icon-only | boolean | Indicates if the button is icon-only. | — |
| icon | component | Specifies the icon to be used in the button. See how to include icons here: TODO:LinkToIcon | — |
| icon-position | array | Defines the position of the icon. | left, right |
| theme | string | Specifies the theme of the button. | — |
| size | array | Defines the size of the button. | default, small |
| additional-classes | string | Additional CSS classes for the button. | — |
| custom-attributes | string | Custom data attribute for the button. | — |
| additional-content | string | Custom content that can be added to the button. | — |