Buttons

Buttons are interactive elements activated by a user with a mouse, keyboard, or tap. Once activated, it then performs a programmable action, such as submitting a form or opening a dialog.

Variations

Primary buttons

Copy as:HTMLReact

copydone

<!-- Component: Large primary basic 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 rounded focus-visible:outline-none whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
  <span>Large button</span>
</button>
<!-- End Large primary basic button -->

Secondary buttons

Copy as:HTMLReact

copydone

<!-- Component: Large secondary basic button -->
<button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide transition duration-300 rounded focus-visible:outline-none 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 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-100 disabled:text-emerald-400 disabled:shadow-none">
  <span>Large button</span>
</button>
<!-- End Large secondary basic button -->

Rounded Full Primary Buttons

Copy as:HTMLReact

copydone

<!-- Component: Large primary basic 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 rounded-full focus-visible:outline-none whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
  <span>Large button</span>
</button>
<!-- End Large primary basic button -->

Rounded Full Secondary Buttons

Copy as:HTMLReact

copydone

<!-- Component: Large secondary basic button -->
<button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide transition duration-300 rounded-full focus-visible:outline-none 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 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-100 disabled:text-emerald-400 disabled:shadow-none">
  <span>Large button</span>
</button>
<!-- End Large secondary basic button -->

Outline Buttons

Copy as:HTMLReact

copydone

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

Link Buttons

Copy as:HTMLReact

copydone

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

App Buttons

Copy as:HTMLReact

Get it onApp Storecopydone

Get it onGoogle Playcopydone

App Storecopydone

Google Playcopydone

Get it onApp Storecopydone

Get it onGoogle Playcopydone

App Storecopydone

Google Playcopydone

Get it onApp Storecopydone

Get it onGoogle Playcopydone

App Storecopydone

Google Playcopydone

<!-- Component: Large primary apple app button  -->
<a href="#" class="inline-flex h-16 min-w-44 items-center justify-start gap-2 whitespace-nowrap rounded bg-emerald-500 px-3.5 text-base font-semibold tracking-wide text-slate-50 transition duration-300 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none">
  <svg width="40" height="40" class="w-10 h-10" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" role="graphics-symbol" aria-label="App store icon">
    <path d="M30.293 21.0245C30.2769 18.0748 31.6111 15.8485 34.3116 14.209C32.8006 12.047 30.518 10.8575 27.5041 10.6244C24.6509 10.3993 21.5325 12.2881 20.3912 12.2881C19.1856 12.2881 16.4208 10.7047 14.2508 10.7047C9.76604 10.7771 5 14.2813 5 21.4103C5 23.516 5.38578 25.6914 6.15735 27.9365C7.18611 30.8861 10.8993 38.1196 14.7732 37.999C16.7986 37.9508 18.2292 36.5603 20.8654 36.5603C23.4212 36.5603 24.7473 37.999 27.0058 37.999C30.9119 37.9427 34.2714 31.3683 35.2519 28.4106C30.0117 25.9432 30.293 21.1772 30.293 21.0245ZM25.7439 7.82744C27.9381 5.2234 27.7372 2.85243 27.6729 2.00049C25.7359 2.11301 23.4935 3.31859 22.2156 4.80546C20.8091 6.39682 19.9813 8.36593 20.1581 10.5842C22.2558 10.7449 24.1687 9.66795 25.7439 7.82744Z" fill="currentColor" />
  </svg>
  <span class="flex flex-col">
    <span class="text-xs font-normal">Get it on</span>
    <span>App Store</span>
  </span>
</a>
<!-- End Large primary apple app button  -->

Usage

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

Dialogs
Modal windows
Forms
Cards
Toolbars

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.

Buttons

Variations

Primary buttons

Secondary buttons

Rounded Full Primary Buttons

Rounded Full Secondary Buttons

Outline Buttons

Link Buttons

App Buttons

Usage

Specs

Accessibility notes

Check out the latest release!