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
button-demo.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.

PropTypeDefaultDescription
variant"blue" | "red" | "cyan" | "orange" | "gray" | "outline" | "inverse"blueVisual color treatment. Use inverse on a dark surface.
size"md" | "lg" | "unset"mdPadding and text size. unset leaves sizing to custom classes.
unstyledbooleanfalseUses the text-link treatment, with spacing and font size controlled by custom classes.
disabledbooleanfalseNative 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.