Button Groups

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

Variations

Primary button groups

Copy as:HTMLReact

copydone

<!-- Component: Large sized primary basic button group -->
<div class="inline-flex overflow-hidden rounded">
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
</div>
<!-- End Large sized primary basic button group -->

Secondary button groups

Copy as:HTMLReact

copydone

<!-- Component: Large sized secondary basic button group -->
<div class="inline-flex overflow-hidden rounded">
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide transition duration-300 justify-self-center whitespace-nowrap bg-emerald-50 text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-100 disabled:text-emerald-400 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide transition duration-300 justify-self-center whitespace-nowrap bg-emerald-50 text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-100 disabled:text-emerald-400 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide transition duration-300 justify-self-center whitespace-nowrap bg-emerald-50 text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-100 disabled:text-emerald-400 disabled:shadow-none">
    <span>Large button</span>
  </button>
</div>
<!-- End Large sized secondary basic button group -->

Rounded full primary button groups

Copy as:HTMLReact

copydone

<!-- Component: Large sized primary basic button group -->
<div class="inline-flex overflow-hidden rounded">
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
</div>
<!-- End Large sized primary basic button group -->

Rounded full secondary button groups

Copy as:HTMLReact

copydone

<!-- Component: Large sized primary basic button group -->
<div class="inline-flex overflow-hidden rounded">
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
</div>
<!-- End Large sized primary basic button group -->

Outline button groups

Copy as:HTMLReact

copydone

<!-- Component: Large sized primary basic button group -->
<div class="inline-flex overflow-hidden rounded">
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
</div>
<!-- End Large sized primary basic button group -->

Link button groups

Copy as:HTMLReact

copydone

<!-- Component: Large sized primary basic button group -->
<div class="inline-flex overflow-hidden rounded">
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
  <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Large button</span>
  </button>
</div>
<!-- End Large sized primary basic button group -->

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.

Button Groups

Variations

Primary button groups

Secondary button groups

Rounded full primary button groups

Rounded full secondary button groups

Outline button groups

Link button groups

Usage

Specs

Accessibility notes

Check out the latest release!