Skip to content

Status badge

Each run shows where it stands, so you can spot what failed and what needs you.

Use it when

  • Something has a state: a run, a check, a file. Queued, running, passed, failed and the rest.
  • The same state shows on several screens, and must look the same on each.

Don’t use it when

  • You’d pick a Badge’s colour by hand. The status sets the colour, icon and label.
  • It sits in a run log with its icon hidden. The icon keeps states apart in grayscale.

The rule it follows

  • Status labels name the state.

    Check: No status label has a subject.

All 3 principles

Before and after

AI working
proposed
Each badge says what’s happening now: AI working, then proposed.

Install

pnpm dlx shadcn@latest add https://tabularui.com/r/status-badge.json

Usage

import { StatusBadge } from '@/components/tabular-ui/components/product/StatusBadge'; <StatusBadge status="failed" /><StatusBadge status="running" />

Set up your app firstStatus badge in Storybook