Skip to content
Amplify from Studio 24
  • Get started
  • Fundamentals
  • Layout helpers
  • Core components
  • Advanced components
  • Design handover & standards
  • Colours
  • Typography
  • Buttons and links
  • Lists
  • Icons
  • Breakpoints
  • Vertical spacing
  • Hide and show items inclusively
  • Skip link
  • Images
  • Forms
  • Form error messages
  • Tables
  • Blockquotes
  • Details and summary
  • Utility classes
  • Flow elements
  • Print styles

Buttons and links

Use a button to help a user carry out an action, such as playing audio/video, toggling a dropdown, opening a modal, etc. If you are navigating a user to a new resource, use a link.

Buttons, and links styled as buttons, need to have sufficient padding to ensure they meet WCAG Success Criterion 2.5.5: Target Size (AAA). This does not apply to links within sentences and paragraphs.

Buttons

Considerations

Disabled buttons can confuse some people, so only use them if testing shows that they make the user interface easier to understand.

Links

Simple text link
Link styled as a button
Link with alternate button style

Considerations

Simple text links are given an underline, in addition to any colour treatment, to meet WCAG Success Criterion 1.4.1: Use of Color (A)

Grouping buttons and links

Buttons (and links styled as buttons) can be arranged in groups using the cluster layout:

Primary action Secondary action
© Studio 24