Button
Formv1.0.0
stable
A customizable button component with multiple variants and states.
Variants
primary
secondary
success
destructive
outline
ghost
link
npx inam-ui add buttonUsage Examples
Basic Usage
Simple button with default styling
<Button>Click me</Button>With Variants
Different visual styles for various actions
<Button variant="primary">Primary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>Loading State
Show loading spinner during async operations
<Button isLoading>Saving...</Button>Accessibility
Keyboard Navigation
- •Enter or Space - Activates the button
- •Tab - Moves focus to/from button
ARIA Labels
aria-labelaria-busy (when loading)
Screen Reader
Announced as 'button' with its text content. Loading state announced as 'busy'.
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'success' | 'destructive' | 'outline' | 'ghost' | 'link' | 'primary' | Visual style of the button. |
fullWidth | boolean | false | Whether the button takes full container width. |
isLoading | boolean | false | Shows a spinner and disables the button. |
disabled | boolean | false | Disables the button. |