Buttons

Buttons communicate actions that users can take. They are placed throughout the UI, in dialogs, forms, cards, and toolbars. Use variant and size to establish action hierarchy.

Variants

Six variants define emphasis from high (primary) to inline (link).

Sizes

Three sizes cover most use cases. Default is the standard choice—use small for dense layouts and large for hero actions.

With Icons

Icons reinforce meaning. Place leading icons for context and trailing icons for directionality.

Icon-Only

Use icon-only buttons for compact toolbars and repeat actions. Always pair with a tooltip for accessibility.

States

Buttons support disabled and loading states. Disabled buttons cannot be interacted with. Loading buttons show a spinner and can optionally disable interaction.

Full Width

Stretch buttons to fill their container for form submissions and mobile layouts.