Components

Badge

Shows the status of a record with a short text and a colour.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

A Badge tells the current status of a record in one or two words. The default Badge is neutral and subtle; pick the tone that matches what the status means.

Badge

import { Badge } from '@bigbang/ui';

export default function Default() {
  return <Badge>Badge</Badge>;
}

Tones

The tone supports the meaning of the status with colour. Each tone has one meaning, and a status always shows in the same tone across the product.

Neutral (neutral): Statuses with no outcome yet or no special meaning: draft, archived.
Brand (brand): New or featured items. It draws attention; it does not report a status.
Info (info): A process that is running: in review, processing.
Success (success): Statuses that ended well: completed, approved, live.
Warning (warning): Statuses that need attention or an action: pending, expiring.
Danger (danger): Statuses that ended badly or contain an error: declined, failed.

NeutralBrandInformationSuccessWarningDanger

import { Badge } from '@bigbang/ui';

export default function Tones() {
  return (
    <>
      <Badge tone="neutral">Neutral</Badge>
      <Badge tone="brand">Brand</Badge>
      <Badge tone="info">Information</Badge>
      <Badge tone="success">Success</Badge>
      <Badge tone="warning">Warning</Badge>
      <Badge tone="danger">Danger</Badge>
    </>
  );
}

Variants

There are two variants. Use subtle in tables and lists; many bold Badges on one screen are tiring to read. Use bold for a status that must stand out on its own, such as a failed action or an account in the test environment.

SubtleBoldSubtleBold

import { Badge } from '@bigbang/ui';

export default function Variants() {
  return (
    <>
      <Badge tone="danger">Subtle</Badge>
      <Badge tone="danger" variant="bold">
        Bold
      </Badge>
      <Badge tone="success">Subtle</Badge>
      <Badge tone="success" variant="bold">
        Bold
      </Badge>
    </>
  );
}

Sizes

There are two sizes. The default medium size (md, 20 px) suits most tables and lists. The small size (sm, 16 px) is for dense tables and narrow spaces.

SmallMedium

import { Badge } from '@bigbang/ui';

export default function Sizes() {
  return (
    <>
      <Badge size="sm">Small</Badge>
      <Badge size="md">Medium</Badge>
    </>
  );
}

With icon

startIcon adds a 12 px icon before the text. The icon is decorative: screen readers skip it and the text carries the status. Use it when the status should also be told apart without colour, for people with colour vision deficiency.

ApprovedDeclined

import { Badge, Icon } from '@bigbang/ui';

export default function WithIcon() {
  return (
    <>
      <Badge tone="success" startIcon={<Icon name="check" />}>
        Approved
      </Badge>
      <Badge tone="danger" startIcon={<Icon name="x" />}>
        Declined
      </Badge>
    </>
  );
}

In a row

A Badge usually sits in a table row or a list item, next to the record it describes. It aligns with the text and does not add height to the row (20 px).

List itemSecondary textSuccess

import { Badge } from '@bigbang/ui';

export default function InContext() {
  return (
    <div className="flex w-full max-w-96 items-center justify-between gap-lg">
      <span className="type-body-md text-fg-default">List item</span>
      <span className="flex items-center gap-md">
        <span className="type-body-md text-fg-subtle">Secondary text</span>
        <Badge tone="success">Success</Badge>
      </span>
    </div>
  );
}

Counter

count shows a number instead of text; a count above max (99 by default) shows as 99+. dot draws only a small circle in the tone colour. For both, give the meaning screen readers read with label.

Live example, StorybookOpen in Storybook

Outline

variant="outline" has no fill; the border and text take the tone colour. It sits quieter next to filled badges.

Live example, StorybookOpen in Storybook

Light and dark mode

Badge takes all its colours from status tokens, so light and dark mode need no extra setup. When you change the brand in the top bar, both examples switch to the new brand’s colours.

NeutralBrandInformationSuccessWarningDanger

import { Badge } from '@bigbang/ui';

export default function Tones() {
  return (
    <>
      <Badge tone="neutral">Neutral</Badge>
      <Badge tone="brand">Brand</Badge>
      <Badge tone="info">Information</Badge>
      <Badge tone="success">Success</Badge>
      <Badge tone="warning">Warning</Badge>
      <Badge tone="danger">Danger</Badge>
    </>
  );
}