Overview
The Button component provides a flexible and accessible way to trigger actions in your application. It supports multiple variants, sizes, and states.
Import
import { Button } from '@abdalkader/component-library';
Basic Usage
<Button variant="primary" onClick={() => console.log('Clicked')}>
Click me
</Button>
Variants
<Button variant="primary">Primary Button</Button>
Sizes
<Button size="small">Small Button</Button>
States
Disabled
<Button disabled>Disabled Button</Button>
<form onSubmit={handleSubmit}>
<Input label="Email" type="email" />
<Button type="submit" variant="primary">
Submit
</Button>
</form>
Accessibility
The Button component includes proper ARIA attributes and keyboard support:
<Button
aria-label="Close dialog"
aria-describedby="dialog-description"
>
×
</Button>
Keyboard Support
| Key | Action |
|---|
Enter | Activates the button |
Space | Activates the button |
Props
variant
'primary' | 'secondary' | 'danger'
default:"primary"
Visual style variant of the button
size
'small' | 'medium' | 'large'
default:"medium"
Size of the button
type
'button' | 'submit' | 'reset'
default:"button"
HTML button type
Examples
<Button variant="secondary" aria-label="Delete item">
<TrashIcon />
</Button>
<div style={{ display: 'flex', gap: '0.5rem' }}>
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Save</Button>
</div>