Skip to main content
USWDS + Tailwind

Button

Use buttons to make important actions easy to find and select. Explore button styles and implementation guidance.

Examples

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
HTML
<div class="space-y-12">


  <!-- Blue -->
  <div class="flex flex-wrap gap-4 items-center">
    <button type="button" class="rounded-sm font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>


    <button type="button" class="rounded-sm font-bold leading-none text-white px-6 py-4 text-xl bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-white px-6 py-4 text-xl bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
  </div>


  <!-- Red -->
  <div class="flex flex-wrap gap-4 items-center">
    <button type="button" class="rounded-sm font-bold leading-none text-white px-5 py-3 bg-red-50 hover:bg-red-60v active:bg-red-70v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-white px-5 py-3 bg-red-50 hover:bg-red-60v active:bg-red-70v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>


    <button type="button" class="rounded-sm font-bold leading-none text-white px-6 py-4 text-xl bg-red-50 hover:bg-red-60v active:bg-red-70v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-white px-6 py-4 text-xl bg-red-50 hover:bg-red-60v active:bg-red-70v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
  </div>


  <!-- Cyan -->
  <div class="flex flex-wrap gap-4 items-center">
    <button type="button" class="rounded-sm font-bold leading-none text-gray-90 px-5 py-3 bg-cyan-30v hover:bg-blue-cool-40v active:bg-blue-cool-60v active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-gray-90 px-5 py-3 bg-cyan-30v hover:bg-blue-cool-40v active:bg-blue-cool-60v active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>


    <button type="button" class="rounded-sm font-bold leading-none text-gray-90 px-6 py-4 text-xl bg-cyan-30v hover:bg-blue-cool-40v active:bg-blue-cool-60v active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-gray-90 px-6 py-4 text-xl bg-cyan-30v hover:bg-blue-cool-40v active:bg-blue-cool-60v active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
  </div>


  <!-- Orange -->
  <div class="flex flex-wrap gap-4 items-center">
    <button type="button" class="rounded-sm font-bold leading-none text-gray-90 px-5 py-3 bg-orange-30v hover:bg-orange-50v hover:text-white active:bg-orange-60 active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-gray-90 px-5 py-3 bg-orange-30v hover:bg-orange-50v hover:text-white active:bg-orange-60 active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>


    <button type="button" class="rounded-sm font-bold leading-none text-gray-90 px-6 py-4 text-xl bg-orange-30v hover:bg-orange-50v hover:text-white active:bg-orange-60 active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-gray-90 px-6 py-4 text-xl bg-orange-30v hover:bg-orange-50v hover:text-white active:bg-orange-60 active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
  </div>


  <!-- Gray -->
  <div class="flex flex-wrap gap-4 items-center">
    <button type="button" class="rounded-sm font-bold leading-none text-white px-5 py-3 bg-gray-50 hover:bg-gray-60 active:bg-gray-80 cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-white px-5 py-3 bg-gray-50 hover:bg-gray-60 active:bg-gray-80 cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>


    <button type="button" class="rounded-sm font-bold leading-none text-white px-6 py-4 text-xl bg-gray-50 hover:bg-gray-60 active:bg-gray-80 cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-white px-6 py-4 text-xl bg-gray-50 hover:bg-gray-60 active:bg-gray-80 cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
  </div>


  <!-- Blue Outline -->
  <div class="flex flex-wrap gap-4 items-center">
    <button type="button" class="rounded-sm font-bold leading-none text-blue-60v px-5 py-3 bg-transparent ring-inset ring-2 ring-blue-60v hover:ring-blue-warm-70v hover:text-blue-warm-70v active:ring-blue-warm-80v active:text-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-blue-60v px-5 py-3 bg-transparent ring-inset ring-2 ring-blue-60v hover:ring-blue-warm-70v hover:text-blue-warm-70v active:ring-blue-warm-80v active:text-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-20 disabled:text-gray-50 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>


    <button type="button" class="rounded-sm font-bold leading-none text-blue-60v px-6 py-4 text-xl bg-transparent ring-inset ring-2 ring-blue-60v hover:ring-blue-warm-70v hover:text-blue-warm-70v active:ring-blue-warm-80v active:text-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-blue-60v px-6 py-4 text-xl bg-transparent ring-inset ring-2 ring-blue-60v hover:ring-blue-warm-70v hover:text-blue-warm-70v active:ring-blue-warm-80v active:text-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-20 disabled:text-gray-50 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
  </div>


  <!-- Outline Light -->
  <div class="flex flex-wrap gap-4 items-center bg-black py-4">
    <button type="button" class="rounded-sm font-bold leading-none text-gray-10 px-5 py-3 bg-transparent ring-inset ring-2 ring-gray-10 hover:ring-gray-5 hover:text-gray-5 active:ring-white active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-gray-10 px-5 py-3 bg-transparent ring-inset ring-2 ring-gray-10 hover:ring-gray-5 hover:text-gray-5 active:ring-white active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>


    <button type="button" class="rounded-sm font-bold leading-none text-gray-10 px-6 py-4 text-xl bg-transparent ring-inset ring-2 ring-gray-10 hover:ring-gray-5 hover:text-gray-5 active:ring-white active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="rounded-sm font-bold leading-none text-gray-10 px-6 py-4 text-xl bg-transparent ring-inset ring-2 ring-gray-10 hover:ring-gray-5 hover:text-gray-5 active:ring-white active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
  </div>


  <!-- Unstyled -->
  <div class="flex flex-wrap gap-4 items-center">
    <button type="button" class="underline leading-none text-blue-60v bg-transparent hover:text-blue-warm-70v active:text-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="underline leading-none text-blue-60v bg-transparent hover:text-blue-warm-70v active:text-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>


    <button type="button" class="underline leading-none text-xl text-blue-60v bg-transparent hover:text-blue-warm-70v active:text-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="underline leading-none text-xl text-blue-60v bg-transparent hover:text-blue-warm-70v active:text-blue-warm-80v cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
  </div>


  <!-- Unstyled Light -->
  <div class="flex flex-wrap gap-4 items-center bg-black py-4">
    <button type="button" class="underline leading-none text-gray-10 bg-transparent hover:text-gray-5 active:text-white cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="underline leading-none text-gray-10 hover:text-gray-5 active:text-white bg-transparent cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>


    <button type="button" class="underline leading-none text-xl text-gray-10 hover:text-gray-5 active:text-white bg-transparent cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    <button type="button" class="underline leading-none text-xl text-gray-10 hover:text-gray-5 active:text-white bg-transparent cursor-pointer focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
  </div>


</div>

Component API

Anatomy

Use a native <button> for an action. Set type="button" for in-form controls such as a dialog trigger, or type="submit" for form submission. Apply Tailwind classes for the visual treatment.

Configuration and styling

Choose the colors, size, and outline treatment with classes as shown in the examples. The native disabled attribute prevents activation and form submission. Keep visible focus styles when customizing classes.

Accessibility

Give the button an accessible name through its text or an appropriate label. Use a link for navigation. Native button keyboard behavior, focus, and disabled semantics are provided by the browser.