Button

Buttons trigger actions and guide users through key interactions on your website. Use them for form submissions, navigation, downloads, and other important user actions. The button component supports multiple styles, sizes, states, and can include icons to enhance usability and visual hierarchy.

Do

  • Use clear, action-oriented text that describes what will happen when clicked (e.g., "Submit Application", "Download PDF").
  • Choose appropriate button styles based on importance: primary for main actions, secondary for supporting actions, tertiary for low-priority supplementary actions.
  • Provide sufficient contrast between button text and background colors for accessibility.
  • Use consistent button placement throughout your site to build user expectations.
  • Include icons when they add clarity to the button's purpose (download, external link, etc.).
  • Test with keyboard navigation to ensure all buttons are accessible without a mouse.
  • Use aria-label for context when button text alone might be ambiguous.
  • Group related buttons logically with primary actions on the right in Western layouts.

Don't

  • Don't use vague text like "Click Here", "Submit", or "Button" without context.
  • Don't overuse primary buttons — limit to one primary action per section or page.
  • Don't make buttons too small — ensure adequate touch targets (minimum 44px).
  • Don't rely solely on color to convey button state or importance.
  • Don't use too many button styles on a single page — maintain visual hierarchy.
  • Don't forget disabled states — clearly indicate when buttons are unavailable.
  • Don't make destructive actions too prominent — use appropriate styling for delete/remove actions.
  • Don't ignore loading states — provide feedback during processing.

Primary

Standard primary button for main actions. Demonstrates the default button styling using the primary style with realistic action text. Use this pattern for the most important action on a page or form section.

Open example in a new tab

Secondary

Supporting action button with secondary styling. Shows the secondary button style for actions that are important but not the primary focus. Perfect for cancel actions, alternative paths, or secondary calls-to-action.

Cancel Request
Open example in a new tab

Tertiary

Link-style button for subtle actions. Uses tertiary styling that appears as a text link with an arrow icon. Ideal for navigating to additional information or less prominent actions.

Learn More
Open example in a new tab

Button With Icon

Secondary button enhanced with a descriptive icon. Demonstrates how icons can clarify button purpose, using a download icon to reinforce the "Download PDF" action. Icons should support, not replace, clear text labels.

Download PDF
Open example in a new tab

Disabled

Primary button in disabled state. Shows how buttons appear when unavailable, with reduced opacity and no interaction. Use for form validation, loading states, or when prerequisites aren't met. 

The disabled state should only be used in situations where users benefit from seeing that there is an action, but more steps are required to make it available. Consider pairing a button in a disabled state with an error message to tell users how to proceed. Also, consider hiding the button altogether if users are unable to interact with it. 

Submit Form
Open example in a new tab

Small

Compact primary button for space-constrained areas. Demonstrates the small size variant while maintaining primary styling. Useful in tight layouts, data tables, or secondary interface areas.

Save Changes
Open example in a new tab

Inverse

Primary and secondary buttons optimized for dark backgrounds. Shows both inverse variants designed for use on dark or colored backgrounds, maintaining proper contrast and visual hierarchy.

Get Started View Details
Open example in a new tab

Accessibility Best Practices

Button demonstrating accessibility best practices with aria-label. Shows how to provide detailed context through aria-label while keeping visible text concise. The button displays "Delete" but announces "Delete fishing licence application permanently" to screen readers.

Learn More
Open example in a new tab

Screen Reader Support

  • Descriptive button text: Use clear, specific text that describes the action (avoid "Click here" or "Read more" without context).
  • ARIA labels for clarity: Use aria-label to provide additional context when button text alone might be ambiguous.
  • Proper button semantics: Use <button> elements for actions and <a> elements for navigation.
  • State announcements: Disabled buttons are properly announced with aria-disabled and disabled attributes.

Keyboard Navigation

  • Full keyboard access: All buttons are accessible via Tab key navigation and activated with Enter or Space.
  • Logical tab order: Buttons follow the natural reading order and visual layout.
  • Focus indicators: Clear visual focus states help keyboard users identify their current position.
  • Disabled state handling: Disabled buttons are removed from tab order with tabindex="-1".

Visual Accessibility

  • High contrast ratios: All button styles meet WCAG AA contrast requirements for text and background.
  • Multiple visual cues: Button states are indicated through color, typography, and other visual elements, not color alone.
  • Adequate sizing: Buttons meet minimum touch target sizes (44px) for mobile accessibility.
  • Clear state differentiation: Hover, focus, active, and disabled states are visually distinct.

Content Guidelines

  • Action-oriented language: Use verbs that clearly describe what will happen ("Submit", "Download", "Cancel").
  • Consistent terminology: Use the same words for the same actions throughout your site.
  • Appropriate urgency: Match button styling to the importance and urgency of the action.
  • Context-aware labels: Provide enough context so users understand the action without surrounding content.

Implementation Considerations

  • Proper HTML semantics: Use <button> for actions that don't navigate and <a> for links.
  • Form integration: Buttons in forms should have appropriate type attributes (submit, button, reset).
  • Loading states: Provide feedback during processing with disabled states or loading indicators.
  • Error handling: Clearly communicate when button actions fail and provide recovery options.

ARIA Attributes in Use

  • aria-label - Provides detailed action descriptions when button text is concise.
  • aria-disabled="true" - Indicates disabled state for anchor-based buttons.
  • disabled - Native disabled attribute for button elements.
  • tabindex="-1" - Removes disabled buttons from keyboard navigation.
Mis à jour: 14 janvier 2026