Button
Triggers an action or event when clicked. Fully accessible with keyboard navigation and perfect RTL support.
Preview
Installation
Terminalbash
Usage
Reacttsx
Examples
Variants
tsx
Sizes
tsx
With Icons
tsx
Loading State
tsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'primary' | Visual style variant of the button |
size | 'sm' | 'md' | 'lg' | 'xl' | 'icon' | 'md' | Size of the button |
loading | boolean | false | Shows loading spinner and disables the button |
disabled | boolean | false | Disables the button |
asChild | boolean | false | Render as a child element (useful with Next.js Link) |
Accessibility
Keyboard Navigation
- Tab: Focus the button
- Enter or Space: Activate the button
Screen Reader
The button role is automatically announced. Use aria-label for icon-only buttons.
ARIA Attributes
role="button": Automatically applied to button elementsaria-disabled: Set when disabled or loading
RTL Considerations
Buttons automatically support RTL layout. Icons positioned with logical properties (me-* for margin-inline-end, ms-* for margin-inline-start) will flip correctly.