Button
A versatile button component with multiple variants and features
Button
A highly customizable button component that supports multiple variants, sizes, colors, and states.
Features
Multiple Variants
Solid, outline, flat, light, ghost, and text variants
Color Options
Primary, secondary, neutral, info, success, warning, and error colors
Flexible Sizing
XS to 2XL size options with consistent spacing
Loading States
Built-in loading states with customizable spinners
Import
Basic Usage
Disabled State
Props
Common Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'solid' | 'outline' | 'flat' | 'light' | 'ghost' | 'text' | 'solid' | The visual style variant of the button |
color | 'primary' | 'secondary' | 'neutral' | 'info' | 'error' | 'warning' | 'success' | 'primary' | The color scheme of the button |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | The size of the button |
rounded | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' | The border radius of the button |
isDisabled | boolean | false | Whether the button is disabled |
isLoading | boolean | false | Whether the button is in a loading state |
spinner | ReactNode | - | Custom spinner component for loading state |
spinnerColor | 'primary' | 'secondary' | 'info' | 'neutral' | 'error' | 'warning' | 'success' | 'white' | - | Color of the loading spinner |
className | string | - | Additional CSS classes |
Button-specific Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'button' | 'submit' | 'reset' | 'button' | The type of the button |
as | 'button' | 'a' | 'button' | Render as a button or anchor element |
Anchor-specific Props
When as="a", the button accepts all anchor (<a>) element props plus the common props above.
Examples
For more examples, check out:
Accessibility
The Button component follows WAI-ARIA guidelines:
- Uses native
<button>element by default - Supports keyboard navigation
- Maintains focus states
- Includes proper ARIA attributes
- Handles disabled states correctly
Best Practices
-
Use appropriate colors for different actions:
- Primary for main actions
- Secondary for alternative actions
- Danger/Error for destructive actions
-
Choose the right variant:
- Solid for primary actions
- Outline for secondary actions
- Ghost/Text for tertiary actions
-
Size considerations:
- Use consistent sizes within the same context
- Consider touch targets for mobile
- Match size with surrounding elements
-
Loading states:
- Show loading state during async operations
- Maintain button width during loading
- Provide visual feedback
Last updated on