Form Elements
Button
Button trigger an action or event, such as submitting a form, opening a dialog or performing a specific task. It provide users with a clear Call to Action (CTA), guiding them through a workflow.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features8 checks
- Minimum 44x44px touch target size (WCAG 2.5.5)
- 2px focus ring with 2px offset for keyboard navigation (WCAG 2.4.7)
- Color contrast ratios meet or exceed 4.5:1 for text (WCAG 1.4.3)
- Semantic HTML button element for proper keyboard and assistive technology support
- aria-disabled attribute for disabled state
- aria-busy attribute for loading state
- Screen reader announcements for loading text
- Icons properly hidden from screen readers with aria-hidden
When to use this component
✓Do's
- •The user needs to perform an action (submit, save, delete, confirm)
- •You need a clear call-to-action on a page or form
- •The action changes data or triggers a process
- •You need to indicate a primary, secondary, or destructive action
- •You need a loading state while an async operation completes
✗Don'ts
- •If the action is purely navigational, use a link instead.
- •If you need a toggle, use Switch or Checkbox instead.
- •If you have more than 3 actions in a row, consider a Menu or Dropdown.
- •If the text is very long, buttons should have concise labels.
- •If you are using it only for styling, semantic HTML matters.
Do's and Don'ts
✓ Do's
Use one primary action per section. Pair with a secondary action for alternatives.
✗ Don'ts
Don't use multiple primary buttons in the same section, it creates confusion about which action is most important.
✓ Do's
Use the danger variant for irreversible actions. Make the label specific about what will be deleted.
✗ Don'ts
Don't use vague labels like "Click Here" or "OK". Button text should describe the action.