Button
Interactive button element with various styles and states. Buttons are used to trigger actions or events.
Import
import { Button } from "@/components/ui/button"Basic Usage
<Button>Click me</Button>Usage Guidelines
When to use
- Use buttons to trigger actions or events
- Use primary buttons for the main action in a form or page
- Use secondary buttons for alternative actions
- Use destructive buttons for actions that delete or remove data
When not to use
- Don't use buttons for navigation; use links instead
- Avoid using too many primary buttons on a single page
- Don't use button styles inconsistently across the application
Accessibility
The Button component follows WAI-ARIA guidelines for buttons:
- Uses the native button element for proper keyboard navigation and screen reader support
- Includes appropriate ARIA attributes when necessary
- Maintains focus styles for keyboard users
- Provides disabled states that are visually and programmatically communicated
Keyboard Interactions
| Key | Description |
|---|---|
Enter / Space | Activates the button |
Tab | Moves focus to the next focusable element |
Shift + Tab | Moves focus to the previous focusable element |