Button
The primary interactive element. Use buttons to trigger actions — submitting forms, opening dialogs, confirming choices.
Import
import { Button } from '@mitek/ui';Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="link">Link</Button>Sizes
<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button> {/* default */}
<Button size="lg">Large</Button>
<Button size="xl">Extra large</Button>Loading state
<Button loading>Saving...</Button>Disabled state
<Button disabled>Disabled</Button>Full width
<Button fullWidth>Full width button</Button>Render as anchor
<Button as="a" href="/dashboard" variant="primary">
Go to dashboard
</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'link' | 'primary' | Visual style |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size |
loading | boolean | false | Shows spinner, disables click |
fullWidth | boolean | false | 100% container width |
iconLeft | ReactNode | — | Icon before label |
iconRight | ReactNode | — | Icon after label |
iconOnly | boolean | false | Square icon-only layout |
as | ElementType | 'button' | Render as different element |
disabled | boolean | false | Native disabled |
className | string | — | Additional CSS class |