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.
Disabled buttons should be used with caution. Read our guidelines for when to disabled buttons.
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