Default
<Button>Deploy</Button>Variants
<Button>Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>Sizes
<Button size="sm">Small</Button>
<Button>Medium</Button>
<Button size="lg">Large</Button>States
<Button disabled>Disabled</Button>
<Button disabled>Processing</Button>On dark surface
<Button>Deploy</Button>
<Button variant="outline" className="text-white border-white">Cancel</Button>Accessibility
How Button works with assistive tech
- Role
- button
- Keyboard
- Enter
- Space
- ARIA attributes
- aria-disabled
- aria-invalid
- Focus behavior
- visible-3px
Disabled state uses pointer-events:none + opacity-50. Use aria-disabled over disabled attribute when focus must remain reachable.