Buttons

Button components for interactive actions throughout the application.

Button variants

Different variants serve different purposes: primary for main actions, secondary for alternatives, outline/ghost for subtle actions, and destructive for dangerous operations.

Button sizes

Choose the size that best fits your layout and hierarchy. Medium is the default.

With icons

Icons can be added to buttons to provide visual context for the action.

Icon buttons

Small (icon-sm)

ghost

Medium (icon)

ghost

Large (icon-lg)

ghost

Small (icon-sm)

outline

Medium (icon)

outline

Large (icon-lg)

outline

Icon buttons come in three sizes: icon-sm, icon, and icon-lg. Add radius="full" for circular buttons.

Disabled state

Disabled buttons indicate that an action is currently unavailable.

Border radius

Buttons support different border radius options for various design contexts.

Link mode

Link mode buttons look like text links but maintain button semantics.