Button
Buttons trigger an action, such as submitting a form, closing a dialog, or navigating to a new page.
The label
attribute controls button's label text.
The appearance
attribute controls the style of button displayed.
The outlined-light
and ghost-light
appearances are the same as outlined
and ghost
except their background colours have opacity when hovered.
The connotation
attribute controls the purpose of the button, expressed in it's colours.
The icon
attribute displays an icon from the icon library](/icons/icons-gallery/), which can be displayed on the leading (default) or trailing side (icon-trailing
) of the badge.
The preferred way to add icons is to use the icon slot.
The icon
prop is deprecated (as of 05/25) and directly replaced with icon
slot. icon
is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.
If the label
is omitted, the button will be displayed as an icon-only button.
When an element has no visible text, provide an accessible name using the aria-label
When using an icon, the stacked
attribute causes the button to be displayed in a stacked format. This layout is only available with the 'rounded' shape.
The size
attribute controls the size of the button.
The shape
attribute controls the shape of the button.
The pending
attribute triggers the pending state, which indicates that the action is being processed.
The spinner is not displayed when using the super-condensed
size.
The disabled
attribute disables the buttons and indicates that the action is not available.
The active
attribute causes the button to appear in its active state. Use it to indicate that the action was triggered by some other means.
Do not use this attribute to indicate a selected or pressed state.
When the button is used to trigger a menu / dropdown, you can set dropdown-indicator
to add a chevron to the button.
When setting dropdown-indicator
the Button's content alignment changes from center to start. You can change it back to center using --button-content-alignment
CSS variable