Vivid Logo Vivid

Button

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

Toggle

Buttons may be toggled. Change icon and label to indicate the state of the button.

Use the aria-pressed attribute to indicate the state of the button to assistive technologies.

Custom Width

A button's width can be easily customised by attaching styles to the button component directly.

When there is not enough space for the label text, the content will be truncated as in the example above.

Toolbars

Toolbars can be created using ghost buttons contained inside an action-group component.