Components

Badge

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

Storybook: Storybook
Source: Source

Installation

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

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

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

<Badge tone="success">Success</Badge>;

Props

tone

Description: What the status means. Colour only supports the text; the text carries the status. violet, teal and pink are category hues with no status meaning.
Type: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger' | 'violet' | 'teal' | 'pink'
Default: 'neutral'

variant

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

size

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

startIcon

Description: Decorative icon element before the text, 12 px. Screen readers skip it; the text carries the meaning.
Type: ReactElement

count

Description: A number to show instead of text, such as unread items. Counts above max show as 99+. Give label for screen readers.
Type: number

max

Description: The largest count shown as a number; a higher count shows as max+.
Type: number
Default: 99

dot

Description: Shows only a small filled circle in the tone colour, such as a mark for something new. Give label for screen readers.
Type: boolean
Default: false

label

Description: What a count or dot badge means for screen readers, such as "12 okunmamış bildirim". The visible number or dot is then hidden from them.
Type: string

className

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

children

Description: The status text. One or two words. Not needed with count or dot.
Type: ReactNode

Native <span> attributes (id, title, aria-*) are passed through. ref is attached to the <span>.

Data attributes

data-component="badge": on the root <span>.
data-part="icon": on the icon wrapper when startIcon is given.

Mapping a status field to a tone

Define the mapping from status to tone in one place. If every screen writes its own, the same status shows in different colours.

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

const statuses: Record<string, { tone: BadgeProps['tone']; label: string }> = {
  approved: { tone: 'success', label: 'Approved' },
  pending: { tone: 'warning', label: 'Pending' },
  failed: { tone: 'danger', label: 'Failed' },
};

export function StatusBadge({ status }: { status: keyof typeof statuses }) {
  const { tone, label } = statuses[status];
  return <Badge tone={tone}>{label}</Badge>;
}