Button

Pill-shaped action, aligned with J&J DS v1.2. Exports from @jnj/design-system/button. Every example below shows the exact snippet; copy it into your app and adjust.

Variants

Brand red is the default; primaryAlt is the warm-dark fill for non-brand emphasis; secondary is the outlined alternative; ghost is low-emphasis; danger uses the J&J special amber; link is the inline text alternative.

Show source

<Button>Primary</Button>
<Button variant="primaryAlt">Primary alt</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="link">Link action</Button>

Sizes

32 / 40 / 48 / 56 px tall. Small and Medium use Johnson Text Medium at 12/14px; Large and Extra-large use Johnson Text Regular at 16/18px.

Show source

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra large</Button>

Icon-only sizes

Icon buttons require aria-label for accessibility — the visible text is replaced by the icon.

Show source

<Button size="iconSm" aria-label="Settings">
  <Icon icon={Settings} size="xs" />
</Button>
<Button size="iconMd" aria-label="Settings">
  <Icon icon={Settings} size="sm" />
</Button>
<Button size="iconLg" aria-label="Settings">
  <Icon icon={Settings} size="md" />
</Button>
<Button size="iconXl" aria-label="Settings">
  <Icon icon={Settings} size="lg" />
</Button>

States

Focus renders a 2px blue ring 2px outside the button. Loading shows a spinner and marks the button aria-busy.

Show source

<Button>Enabled</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>
<Button variant="primaryAlt" loading>Loading alt</Button>
<Button variant="secondary" disabled>Disabled outlined</Button>

With icons

Icons can sit before or after the label. Use lucide-react for generic UI icons and <JnjIcon /> for the curated J&J set.

Show source

<Button>
  <Icon icon={Download} size="xs" />
  Download
</Button>
<Button variant="primaryAlt">
  Continue
  <Icon icon={ArrowRight} size="xs" />
</Button>
<Button variant="secondary">
  <Icon icon={Settings} size="xs" />
  Settings
  <Icon icon={ArrowRight} size="xs" />
</Button>
<Button variant="danger">
  <Icon icon={Trash2} size="xs" />
  Delete
</Button>

Full width

Common inside a constrained form column.

Show source

<Button fullWidth>Submit</Button>

On inverse surfaces

Set onInverse for use on background-inverse / background-03 dark surfaces. Maps to Figma's 'Button — Inverse' set: white/translucent fills with a light-blue (#69d0ff) focus ring.

Show source

<Button onInverse>Primary</Button>
<Button onInverse variant="secondary">Secondary</Button>
<Button onInverse variant="ghost">Ghost</Button>
<Button onInverse loading>Loading</Button>
<Button onInverse disabled>Disabled</Button>

Inverse — sizes and icons

onInverse composes with size, icons, and loading just like the standard Button.

Show source

<Button onInverse size="sm">
  <Icon icon={Download} size="xs" />
  Download
</Button>
<Button onInverse size="md">
  Continue
  <Icon icon={ArrowRight} size="xs" />
</Button>
<Button onInverse size="lg" variant="secondary">Outlined</Button>
<Button onInverse size="iconMd" aria-label="Settings">
  <Icon icon={Settings} size="sm" />
</Button>