---
title: Button (React) - 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

```tsx
import { Button } from '@uswds-tailwind/react/button'

export default function ButtonDemo() {
  return (
    <div className="space-y-12">
      <div className="flex flex-wrap items-center gap-4">
        <Button type="button" variant="blue">Default</Button>
        <Button type="button" variant="blue" disabled>Default</Button>
        <Button type="button" variant="blue" size="lg">Default</Button>
        <Button type="button" variant="blue" size="lg" disabled>Default</Button>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Button type="button" variant="red">Default</Button>
        <Button type="button" variant="red" disabled>Default</Button>
        <Button type="button" variant="red" size="lg">Default</Button>
        <Button type="button" variant="red" size="lg" disabled>Default</Button>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Button type="button" variant="cyan">Default</Button>
        <Button type="button" variant="cyan" disabled>Default</Button>
        <Button type="button" variant="cyan" size="lg">Default</Button>
        <Button type="button" variant="cyan" size="lg" disabled>Default</Button>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Button type="button" variant="orange">Default</Button>
        <Button type="button" variant="orange" disabled>Default</Button>
        <Button type="button" variant="orange" size="lg">Default</Button>
        <Button type="button" variant="orange" size="lg" disabled>Default</Button>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Button type="button" variant="gray">Default</Button>
        <Button type="button" variant="gray" disabled>Default</Button>
        <Button type="button" variant="gray" size="lg">Default</Button>
        <Button type="button" variant="gray" size="lg" disabled>Default</Button>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Button type="button" variant="outline">Default</Button>
        <Button type="button" variant="outline" disabled>Default</Button>
        <Button type="button" variant="outline" size="lg">Default</Button>
        <Button type="button" variant="outline" size="lg" disabled>Default</Button>
      </div>
      <div className="flex flex-wrap items-center gap-4 bg-black py-4">
        <Button type="button" variant="inverse">Default</Button>
        <Button type="button" variant="inverse" disabled>Default</Button>
        <Button type="button" variant="inverse" size="lg">Default</Button>
        <Button type="button" variant="inverse" size="lg" disabled>Default</Button>
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Button type="button" variant="blue" unstyled>Default</Button>
        <Button type="button" variant="blue" unstyled disabled>Default</Button>
        <Button type="button" variant="blue" unstyled size="lg" className="text-xl">Default</Button>
        <Button type="button" variant="blue" unstyled size="lg" className="text-xl" disabled>Default</Button>
      </div>
      <div className="flex flex-wrap items-center gap-4 bg-black py-4">
        <Button type="button" variant="inverse" unstyled>Default</Button>
        <Button type="button" variant="inverse" unstyled disabled>Default</Button>
        <Button type="button" variant="inverse" unstyled size="lg" className="text-xl">Default</Button>
        <Button type="button" variant="inverse" unstyled size="lg" className="text-xl" disabled>Default</Button>
      </div>
    </div>
  )
}
```

## Component API

### Button `<button>`

Accepts native button attributes and forwards its ref.

| Prop | Type | Default | Description |
| - | - | - | - |
| `variant` | `"blue" \| "red" \| "cyan" \| "orange" \| "gray" \| "outline" \| "inverse"` | `blue` | Visual color treatment. Use inverse on a dark surface. |
| `size` | `"md" \| "lg" \| "unset"` | `md` | Padding and text size. unset leaves sizing to custom classes. |
| `unstyled` | `boolean` | `false` | Uses the text-link treatment, with spacing and font size controlled by custom classes. |
| `disabled` | `boolean` | `false` | Native disabled behavior and disabled styling. |

Other native button props, including type, name, value, event handlers, and aria-\* pass through. buttonVariants is exported for using the same style recipe in a custom composition.

### Styling and accessibility

Set type="button" for in-form controls such as a dialog trigger; use type="submit" for form submission. The visible text or an appropriate label must name the action. Keep the supplied focus outline when extending styles. Use a link for navigation.