Button
A versatile interactive element that triggers actions and navigates users through an interface.
Overview
The Button component is a fundamental UI element used to help users perform actions and make choices. Buttons communicate actions that users can take and typically appear in forms, dialogs, and toolbars.
Our Button component is built with accessibility in mind and follows WAI-ARIA best practices. It supports keyboard navigation, focus states, and can be rendered as different HTML elements.
Variants
Button comes in different variants to help communicate purpose and hierarchy.
Sizes
Buttons are available in different sizes to accommodate various UI needs.
Examples
Loading State
You can add a loading spinner to buttons to indicate processing.
With Icons
Enhance your buttons with icons for better visual communication.
Using with Links
The Button component can be used as an anchor (<a>) element by using the asChild prop with a Link component.
API Reference
The Button component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'default' | The visual variant of the button. |
| size | 'default' | 'sm' | 'lg' | 'icon' | 'default' | The size of the button. |
| asChild | boolean | false | When true, the button will render its children directly without wrapping them. Useful for applying button styles to other elements like links. |
| className | string | undefined | Additional CSS classes to add to the button. |
| disabled | boolean | false | When true, the button will be disabled. |
The Button component also accepts all the props of the HTML button element.
Accessibility
The Button component follows WAI-ARIA guidelines to ensure accessible implementation:
Keyboard Navigation
Buttons are natively focusable and can be activated using the keyboard (Space or Enter).
Proper Roles
The component uses the native button element, which provides the appropriate ARIA role by default.
Focus States
Clearly visible focus states are provided for keyboard navigation.
Disabled States
When disabled, the button communicates its unavailable state to assistive technologies.
Accessibility Tip
When using icon-only buttons, always provide a descriptive label either visually or using aria-label to ensure users of assistive technologies understand the button's purpose.
Best Practices
Follow these guidelines to ensure effective use of the Button component:
Use Appropriate Variants
Do
- Use the default variant for primary actions
- Use the destructive variant for potentially destructive actions
- Use the secondary or outline variants for secondary actions
- Use the ghost variant for tertiary actions or in toolbars
- Use the link variant for navigation links that visually appear as buttons
Don't
- Use multiple primary buttons in a single view
- Use the destructive variant for non-destructive actions
- Mix too many button variants in a single area
- Use buttons when a simple link would be more appropriate
- Place buttons without sufficient spacing between them
Labeling
Do
- Use clear, concise, action-oriented labels
- Use verbs to indicate actions (e.g., "Save," "Delete," "Submit")
- Be specific about the action (e.g., "Save Draft" vs "Publish")
- Add aria-label for icon-only buttons
Don't
- Use vague or generic labels (e.g., "Click Here," "Button")
- Use the same label for different actions
- Use lengthy button text that can get truncated
- Omit accessible labels for icon-only buttons
Placement
Do
- Place primary actions on the right in left-to-right languages (RTL aware)
- Group related actions together with consistent spacing
- Maintain a visual hierarchy corresponding to the importance of actions
- Follow a consistent button placement pattern across your application
Don't
- Place too many buttons in a single view without clear hierarchy
- Position buttons inconsistently across different screens
- Place opposing actions like "Save" and "Delete" next to each other
- Use button positioning that could lead to accidental clicks