Button component
Properties
| Name | Description | Default |
|---|---|---|
| align | Button alignment in a Button group | - |
| disabledTooltip | - | |
| icon | Icon appended before Button content | - |
| iconAfter | Icon appended after Button content | - |
| iconSize | Icon size | - |
| loading | Button loading state | - |
| round | Button round style | - |
| size | Button visual size | - |
| variant | Button style variant | - |
Variants
Primary button should be used for the main action in a view, section or dialog. Respectivelly `secondary` button is used if more than one action is available. `Ghost` variant buttons are typically used for less-pronounced or cancelling actions.
Size
Button component is available in medium and small size. All single form elements should be sized the same.
For the button to stretch in a flex container, you can apply the `flex` property.
With Icon
Button component can be enhaced with an icon to explain the Button's action. In case of a button containing only an icon without a text label – the action descriptional label has to be defined via the `aria-label` property.
Group
`Button.Group` component should be used when multiple button actions are required at once. The buttons need to be immediate children and the `size` prop can be defined to be applied to all Buttons in group.
To align buttons in a group to the opposite position of the pirmary actions, the `align="secondary"` property can be assigned to the Button component.
When the group is displayed on the right side of the screen, the buttons should be right aligned using the `align` prop and with the primary action positioned to most right. The opposite alignment should be used for groups aligned on the left side of the screen.
The `collapse` property can be defined for a Button Group – on narrow screens all group buttons, except the primary action button, will be collapsed under a Menu.
With Loading State
Button in loading state can be used on asynchronous actions like sending or saving form data.
Unstyled
Button component is also available in an unstyled version as `ButtonBase` for use in components requiring custom styled buttons.