Button

Installation

npx usmds add button

Usage

import { Button } from '@components/Button';
import { Text } from '@components/Text';
 
<Button>
  <Text>Button</Text>
</Button>

Props

Button

Extends Pressable props.

Prop	Type	Default	Description
variant	`'default' \| 'secondary' \| 'accent-cool' \| 'accent-warm' \| 'base' \| 'outline' \| 'inverse'`	`'default'`	The visual style variant of the button.
size	`'default' \| 'sm' \| 'lg' \| 'big' \| 'icon'`	`'default'`	The size variant of the button.
startIcon	`ReactNode`	-	Icon element to display before the button content.
endIcon	`ReactNode`	-	Icon element to display after the button content.
disabled	`boolean`	`false`	When true, disables button interactions.
className	`string`	-	Additional Tailwind classes to apply.

Variants

Default (Primary)

<Button variant="default">
  <Text>Primary</Text>
</Button>

Secondary

<Button variant="secondary">
  <Text>Secondary</Text>
</Button>

Accent Cool

<Button variant="accent-cool">
  <Text>Accent Cool</Text>
</Button>

Accent Warm

<Button variant="accent-warm">
  <Text>Accent Warm</Text>
</Button>

Base

<Button variant="base">
  <Text>Base</Text>
</Button>

Outline

<Button variant="outline">
  <Text>Outline</Text>
</Button>

Inverse

<Button variant="inverse">
  <Text>Inverse</Text>
</Button>

Sizes

Small

<Button size="sm">
  <Text>Small Button</Text>
</Button>

Default

<Button size="default">
  <Text>Default Button</Text>
</Button>

Large

<Button size="lg">
  <Text>Large Button</Text>
</Button>

Big

<Button size="big">
  <Text>Big Button</Text>
</Button>

Icon

<Button size="icon">
  <Mail />
</Button>

With Icons

// Start Icon
<Button startIcon={<Mail />}>
  <Text>Start Icon</Text>
</Button>
 
// End Icon
<Button endIcon={<ArrowRight />}>
  <Text>End Icon</Text>
</Button>
 
// Both Icons
<Button startIcon={<Mail />} endIcon={<ArrowRight />}>
  <Text>Both Icons</Text>
</Button>

States

Buttons support various states through className props:

Hover

<Button className="bg-primary-hover">
  <Text>Hover State</Text>
</Button>

Active

<Button className="bg-primary-active">
  <Text>Active State</Text>
</Button>

Focus

<Button className="ring-2 ring-focus-ring ring-offset-2">
  <Text>Focus State</Text>
</Button>

Disabled

<Button disabled>
  <Text>Disabled Button</Text>
</Button>

Interactive State

The Button component accepts a function as children to render content based on the press state:

<Button>
  {(state) => (
    <Text>
      {state.pressed ? 'Pressing!' : state.hovered ? 'Hovering!' : 'Interactive'}
    </Text>
  )}
</Button>

Accessibility

The Button component:

Uses role="button" for proper semantic structure
Supports keyboard navigation
Maintains WCAG color contrast requirements
Provides appropriate disabled states
Includes clear, descriptive text labels

Button

On this page