Button

Buttons are interactive elements used for actions and navigation.

Variants & Colors

Buttons support three variants across six semantic colors.

Sizes

Buttons come in five sizes to fit different contexts.

Rounded

Buttons can be rounded for a pill-shaped appearance.

Icon Only

Square buttons maintain equal dimensions for icon-only use.

With Icon

Buttons can include icons alongside text for visual context.

Full Width

Block buttons expand to fill the available width.

States

Buttons can be disabled or show a loading indicator.

As Link

Buttons can render as anchor elements when given an href prop.