Button
Buttons trigger actions and events. They come in three variants (Main, Secondary, Ghost) and multiple sizes.
When to use
check_circleWhen to use
- For primary actions like "Submit", "Save", or "Create"
- For secondary actions that support the primary action
- For navigation or toggling views with ghost buttons
- When the action has clear, predictable outcome
cancelWhen not to use
- For navigation to external links (use links instead)
- When there are too many actions (simplify the UI)
- For destructive actions without confirmation
Main Button
States
Default, hover, active, and focus states
Default
Hover
Active
Focus
Sizes
Medium (default)
Small
Secondary Button
States
Default
Hover
Active
Focus
Large (Icon Only)
Default
Hover
Active
Focus
Ghost Button
States
Default
Hover
Active
Focus
Toggled States
Toggled
Toggled + Hover
Toggled + Active
Toggled + Focus
Usage
tsx
import { Button } from '@/components/Button';
// Main button (default)
<Button label="Submit" />
// Secondary button
<Button variant="secondary" label="Cancel" />
// Ghost button
<Button variant="ghost" label="Learn more" />tsx
// With custom icons
<Button
leftIcon="add"
rightIcon="arrow_forward"
label="Create new"
/>
// Icon only (large size)
<Button
variant="secondary"
size="large"
leftIcon="settings"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'main' | 'secondary' | 'ghost' | 'main' | Visual style of the button |
size | 'small' | 'medium' | 'large' | 'medium' | Button size. Large is icon-only. |
leftIcon | string | 'circle' | Material Symbols icon name for left icon |
rightIcon | string | 'arrow_right_alt' | Material Symbols icon name for right icon |
label | string | 'Button' | Button text label |
showLeftIcon | boolean | true | Whether to show the left icon |
showRightIcon | boolean | true | Whether to show the right icon |
showLabel | boolean | true | Whether to show the label |
toggled | boolean | false | Toggled state for ghost buttons |
Accessibility
- Uses semantic
<button>element - Icons have
aria-hidden="true"to prevent screen reader confusion - Supports keyboard navigation (Tab, Enter, Space)
- Focus state is clearly visible with border highlight
- Color contrast meets WCAG AA standards