Vivid Logo Vivid

Button

Buttons trigger an action, such as submitting a form, closing a dialog, or navigating to a new page.

Label

The label attribute controls button's label text.

Appearance

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.

Connotation

The connotation attribute controls the purpose of the button, expressed in it's colours.

Icon

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.

Icon Only

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-labelattribute. This ensures screen reader users can understand the element’s purpose, even when it's represented only by an icon or visual styling.

Stacked

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.

Size

The size attribute controls the size of the button.

Shape

The shape attribute controls the shape of the button.

Pending

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.

Disabled

The disabled attribute disables the buttons and indicates that the action is not available.

Active

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