Button

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Button component is a fundamental UI element that offers multiple visual variants, sizes, and states. Built with accessibility in mind, it supports icons, loading states, and can be rendered as other elements.

Basic Usage

View in Storybook

Variants

View in Storybook

Sizes

With Icons

Loading State

As Link

Form Actions

Disabled States

Properties

Button

Property	Type	Default	Description
variant	"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"	"default"	Visual variant of the button.
size	"sm" | "md" | "lg" | "xl" | "icon"	"md"	Size of the button.
asChild	boolean	false	If true, renders as the child element instead of a button.
isLoading	boolean	false	If true, shows loading spinner.
disabled	boolean	false	If true, disables the button.
className	string	-	Additional CSS classes.

Variants

Variant	Description	Recommended Use
default	Primary button with colored background	Main actions, CTAs
destructive	Red button for destructive actions	Delete, remove, cancel
outline	Button with border, transparent background	Secondary actions
secondary	Button with light gray background	Alternative actions
ghost	Transparent button, hover only	Subtle actions, menus
link	Link appearance with underline	Links that look like buttons

Sizes

Size	Height	Recommended Use
sm	32px	Compact spaces, tables
md	36px	General use (default)
lg	40px	Forms, important CTAs
xl	48px	Hero sections, landing pages
icon	36x36px	Icons only, no text

Features

Accessibility

• Full keyboard support (Enter, Space)
• Visible focus states
• Proper ARIA attributes
• Screen reader compatible
• Clear disabled states
• Adequate contrast in all variants

Loading States

• Built-in loading spinner
• Automatic disabled state when loading
• Smooth transitions

Flexibility

• Can render as any element with asChild
• Icon support with proper spacing
• Customizable with Tailwind CSS

Common Use Cases

The Button component is perfect for:

• Primary actions - Save, submit, create, confirm
• Secondary actions - Cancel, edit, view details
• Destructive actions - Delete, remove, reset
• Navigation - Links that need button styling
• Form controls - Submit, reset, add item
• Call-to-actions - Sign up, get started, learn more
• Icon actions - Close, expand, settings

Best Practices

1. Use appropriate variants - default for primary actions, destructive for dangerous actions
2. Maintain consistency - Use same sizes in similar contexts
3. Provide feedback - Use isLoading for async operations
4. Be descriptive - Use clear text that describes the action
5. Consider hierarchy - Primary buttons should stand out visually
6. Test accessibility - Verify keyboard navigation and screen readers
7. Use icons thoughtfully - Icons should complement, not replace clear text