Appearance
Button
Buttons trigger actions or navigate to new pages.
Examples
Basic Usage
Sizes
Disabled State
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'default' | 'default' | Button style variant |
size | 'small' | 'medium' | 'large' | 'medium' | Button size |
disabled | boolean | false | Disable button interaction |
type | 'button' | 'submit' | 'reset' | 'button' | HTML button type |
Events
| Event | Payload | Description |
|---|---|---|
click | MouseEvent | Emitted when button is clicked |
Slots
| Slot | Description |
|---|---|
default | Button content |
icon | Optional icon slot |
Accessibility
- Uses semantic
<button>element - Supports keyboard navigation
- Includes proper ARIA attributes
- Focus indicators meet WCAG standards
Best Practices
- Clear Labels: Use descriptive text that explains the action
- Consistent Styling: Use the same variant for similar actions
- Loading States: Show loading indicator for async actions
- Error Handling: Provide feedback when actions fail