Button Groups

Button groups help people select options, switch views, or sort elements.

Variations

Primary button groups

copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone

Secondary button groups

copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone

Rounded full primary button groups

copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone

Rounded full secondary button groups

copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone
copydone

Outline button groups

copydone
copydone
copydone

Usage

Button groups can have 2-5 segments. Each segment is clearly divided and contains label text, an icon, or both.

Specs

Buttons come in 6 styles (primary, secondary, primary rounded, secondary rounded, outline and link) They can contain text, leading or trailing icons and even a notification badge. All variations come in 3 sizes:

  • Small: 2em height (32px), 1rem (16px) horizontal padding and 0.75rem (12px) font size. Icons on small buttons are 1rem (16px) wide and tall and have a 0.5rem (8px) distance from the text.
  • Base: 2.5em height (40px), 1.25rem (20px) horizontal padding and 0.875rem (14px) font size. Icons on base buttons are 1.25rem (20px) wide and tall and have a 0.5rem (8px) distance from the text.
  • Large: 3em height (48px), 1.5rem (24px) horizontal padding and 0.875rem (14px) font size. Icons on large buttons are 1.25rem (20px) wide and tall and have a 0.5rem (8px) distance from the text.

Accessibility notes

  • A <button> tag does not need anything special to work. Use <button> when you can, but it is possible to use other elements (such as a link) as long as you add role="button"
  • In the case of icon-only buttons include a span with className=“sr-only" from screen readers and hence give more context to the button's purpose.
  • If it contains an icon, use aria-label to describe the icon.
  • If a link is used instead of a button element include a role="button" role.