---
title: Button (Vanilla) - USWDS + Tailwind
description: Use buttons to make important actions easy to find and select.
  Explore button styles and implementation guidance.
---

# Button

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

## Examples

```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.