Components

StatusBadge

Shows a status from the shared status vocabulary, with a tone, an icon and text.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { StatusBadge } from '@bigbang/ui';
Source: StatusBadge.tsx
Storybook: StatusBadge · Playground

StatusBadge is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab.

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

<StatusBadge status="approved" />;

Props

statusRequired

Description: The status to show. A key of the vocabulary maps to a tone, an icon and a label; pages never pass a tone. A code outside the vocabulary shows as neutral text and warns once in development.
Type: 'draft' | 'pending' | 'in-review' | 'active' | 'approved' | 'completed' | 'paused' | 'cancelled' | 'rejected' | 'failed' | 'expired' | 'archived' | (string & Record<never, never>)

size

Description: Height and inline padding: 16 and 20 px. Use sm in dense tables.
Type: NonNullable<'sm' | 'md'>
Default: 'md'

variant

Description: How strong the badge is. Use subtle in tables and lists, bold for a single status that needs attention.
Type: NonNullable<'bold' | 'subtle' | 'outline'>
Default: 'subtle'

label

Description: Replaces the vocabulary text, for example with a product term. The tone and icon stay those of the status.
Type: string

announce

Description: Adds a polite live region that announces the label when the status changes. Use it when the status changes on the page without a user action, such as a background job; leave it off in lists and tables.
Type: boolean
Default: false

className

Description: For layout only: margins and alignment. Do not use it to change colour or size.
Type: string

Native <span> attributes (id, aria-*) pass through to the badge. You cannot pass a tone: the tone comes from the vocabulary.

Status vocabulary

statusVocabulary and the StatusKey type are exported from the package. Each entry holds { tone, icon, label }; label is the library string id (ui.status.<key>).

import { statusVocabulary, type StatusKey } from '@bigbang/ui';

const keys = Object.keys(statusVocabulary) as StatusKey[];

To add a status, add an entry to vocabulary.ts and write the ui.status.<key> text in both languages in strings.ts; a label that names a missing string is a type error.

Data attributes

data-component="status-badge", data-status: on the badge element.
data-part="icon": on the icon wrapper (from Badge).

Announcing a status change

<StatusBadge status={job.status} announce />