A short outlined label for a state or a count, in five tones and with no fill.

Tones

Neutral is the base. The other tones only change the color, and the label always names the state.

  • Error: invalid or failed.
  • Success: success.
  • Warning: needs a look soon but is not a failure, such as Watch, Behind, Needs review or Out of date.

No tone is ever decoration, even in sample content. Warning never stands in for the attention cue, the light orange that marks a change, such as a changed field's border. Clay and signal orange are never tones: they mean unsaved work and consent.

Example

BetaNewPublishedNeeds reviewFailed
Follows the page theme and corners
import { Badge } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

export default function BadgeTones(): ReactElement {
  return (
    <div className="row" style={{ justifyContent: 'center', gap: 12 }}>
      <Badge>Beta</Badge>
      <Badge tone="info">New</Badge>
      <Badge tone="success">Published</Badge>
      <Badge tone="warning">Needs review</Badge>
      <Badge tone="error">Failed</Badge>
    </div>
  );
}

Counts

Figures are tabular, so a column of counts lines up whatever the digits.

Example

Inbox12
Drafts8
Sent1204
Follows the page theme and corners
import { Badge } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

const FOLDERS = [
  ['Inbox', 12],
  ['Drafts', 8],
  ['Sent', 1204],
] as const;

export default function BadgeCounts(): ReactElement {
  return (
    <div style={{ display: 'grid', gap: 8, width: 220, margin: '0 auto' }}>
      {FOLDERS.map(([name, count]) => (
        <div key={name} className="row" style={{ justifyContent: 'space-between' }}>
          <span>{name}</span>
          <Badge>{count}</Badge>
        </div>
      ))}
    </div>
  );
}

Usage

A static span with no React Aria, so it works in a server component without 'use client'.

import { Badge } from '@snapshot-ui/react';

export function Row() {
  return (
    <p>
      Release notes <Badge tone="info">New</Badge>
    </p>
  );
}

Props

A Badge accepts every attribute of an HTML element.

children
ReactNode

The label or the count. Say what the badge means in words, since the tone is only a repeat.

className
string

Added after the library's own classes.

tone
BadgeTone

What the badge means, repeated in color. Error means invalid or failed, success means success, and warning means needs a look soon, not a failure. Never decoration. Clay and signal orange are not tones.

Default: 'neutral'

Accessibility

Color is never the only signal. The label says what the badge means, and the tone repeats it. A badge is not announced when it changes, so put a count that updates in a live region.

Design rules

What keeps badges in the system.

Keep the label to a word or a number.

Put it on the page, a card, a rail or a raised surface, where its colors are measured.

Never fill a badge or add a color of your own. A tinted fill puts the text on a ground nobody measured.

Never use a badge as a button. It is a label, not a control.

esc
↑ ↓ to move↵ to open