Components

StatusBadge

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

Storybook: Storybook
Source: Source

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

Live example, StorybookOpen in Storybook

Default

status is the only required prop. The vocabulary key decides the tone, icon and text; you never pass a tone. The text follows the Provider’s language.

Etkin

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

export default function Default() {
  return <StatusBadge status="active" />;
}

All statuses

The starter vocabulary has twelve statuses. Each has a fixed tone, icon and text, so the same status looks the same on every screen.

TaslakBeklemedeİnceleniyorEtkinOnaylandıTamamlandıDuraklatıldıİptal edildiReddedildiBaşarısızSüresi dolduArşivlendi

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

export default function Statuses() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <StatusBadge status="draft" />
      <StatusBadge status="pending" />
      <StatusBadge status="in-review" />
      <StatusBadge status="active" />
      <StatusBadge status="approved" />
      <StatusBadge status="completed" />
      <StatusBadge status="paused" />
      <StatusBadge status="cancelled" />
      <StatusBadge status="rejected" />
      <StatusBadge status="failed" />
      <StatusBadge status="expired" />
      <StatusBadge status="archived" />
    </div>
  );
}

Variants

subtle is for tables and lists. bold is for a single status that needs attention. The variant does not change the vocabulary tone; it only adds emphasis.

OnaylandıOnaylandıBaşarısızBaşarısız

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

export default function Variants() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <StatusBadge status="approved" />
      <StatusBadge status="approved" variant="bold" />
      <StatusBadge status="failed" />
      <StatusBadge status="failed" variant="bold" />
    </div>
  );
}

Sizes

size sets the height and inline padding: sm is 16 px, md is 20 px. Use sm in dense tables.

BeklemedeBeklemede

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

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <StatusBadge status="pending" size="sm" />
      <StatusBadge status="pending" size="md" />
    </div>
  );
}

Custom text

label replaces the text only; the tone and icon still come from the status. It helps when your product has its own term.

Live

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

export default function Label() {
  return <StatusBadge status="active" label="Live" />;
}

Status change

When the status changes, the badge is remounted and the new status fades in. announce tells screen readers about the change politely; turn it on for statuses that change without a user action.

Taslak

import { Button, StatusBadge, type StatusKey } from '@bigbang/ui';
import { useState } from 'react';

const sequence: StatusKey[] = ['draft', 'pending', 'in-review', 'approved', 'completed'];

export default function StatusChange() {
  const [index, setIndex] = useState(0);
  return (
    <div className="flex items-center gap-xl">
      <div className="min-w-32">
        <StatusBadge status={sequence[index % sequence.length] ?? 'draft'} announce />
      </div>
      <Button size="sm" variant="secondary" onClick={() => setIndex((current) => current + 1)}>
        Next status
      </Button>
    </div>
  );
}

Unknown status

A code outside the vocabulary shows in the neutral tone with the raw code, and warns once in the console during development. This is a fallback: add the missing status to the vocabulary.

on-hold

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

export default function Unknown() {
  return <StatusBadge status="on-hold" />;
}

Light and dark mode

StatusBadge takes every colour from status tokens; text contrast holds in both modes.

OnaylandıOnaylandıBaşarısızBaşarısız

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

export default function Variants() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <StatusBadge status="approved" />
      <StatusBadge status="approved" variant="bold" />
      <StatusBadge status="failed" />
      <StatusBadge status="failed" variant="bold" />
    </div>
  );
}