Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    StatusBadge

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

    Storybook
    Storybook
    Source
    Source

    When to use

    Section titled “When to use”

    StatusBadge shows the status of a record or a process: in a table row, a card footer, the header of a detail page. The status comes from the shared vocabulary, so the same status looks the same across products, with the same tone, icon and text.

    When not to use

    Section titled “When not to use”
    • For a free-form value: use Tag for values the user types or picks.
    • For a counter: use Badge for numbers such as “3 new”.
    • For a one-off status with no vocabulary entry: add it to the vocabulary first; do not pick a tone with Badge on the page.
    • To start an action: StatusBadge is not interactive. Use Button for actions.

    Anatomy

    Section titled “Anatomy”
    1. Root: the same shell as Badge; 1 px border, fully rounded corners.
    2. Icon: from the vocabulary, 12 px, decorative.
    3. Text: from the vocabulary or replaced with label; one or two words.
    4. Live region (optional): the hidden polite announcement area added by announce.

    Behaviour

    Section titled “Behaviour”
    • The status is set by status alone. Tone, icon and text are read from the vocabulary; the page passes no tone.
    • The badge is static: it does not change on hover or click and is not a tab stop.
    • When the status changes, the badge is remounted and fades in with motion.reveal. With reduced motion only a very short fade remains.
    • With announce, the text is written into a hidden role="status" region; screen readers announce the change politely. Nothing is announced on first render.
    • A code outside the vocabulary shows in the neutral tone, without an icon, as the raw code; it warns once per code in the console during development.
    • The variant only changes emphasis: subtle or bold. The catalogue calls it solid; here it is bold, to match Badge.

    Guidelines

    Section titled “Guidelines”

    Pick a status from the vocabulary

    Section titled “Pick a status from the vocabulary”

    Pass the status with status; the tone and icon come from the vocabulary.

    Onaylandı
    DoA status key is passed; the look is in the vocabulary.
    sort-of-approved
    Don'tA code outside the vocabulary: neutral raw text.

    Bold is for one status

    Section titled “Bold is for one status”

    Emphasise only the single status that needs attention in a list.

    TamamlandıBeklemedeBaşarısız
    DoMost rows are subtle; one status is bold.
    TamamlandıBeklemedeBaşarısız
    Don'tEverything bold: the emphasis loses its meaning.

    Always show the text

    Section titled “Always show the text”

    The status should not rest on colour or an icon alone.

    Başarısız
    DoIcon and text together.
    Don'tNo text: only colour carries the status.

    Keep custom text short

    Section titled “Keep custom text short”

    You can rename a term with label; do not write a sentence.

    Live
    DoA short product term.
    This record is public right now
    Don'tA sentence: the badge overflows.

    Content

    Section titled “Content”
    • The texts are defined in the vocabulary: one or two words in sentence case, such as “Draft” and “In review”.
    • When you rename with label, keep it to one or two words too.
    • Use the same word for the same status on every screen; the vocabulary is the single source.
    • When you need a new status, add it to the vocabulary with a tone, an icon and text in both languages.
    Section titled “Related components”
    • Badge: a status and counter indicator not tied to the vocabulary; StatusBadge is built on it.
    • Tag: for labels and filters the user assigns.
    • Table: shows statuses row by row.