Badge
A compact status label for state, category, and metadata markers in dense interfaces.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/primitive-badgeHow to use
import { BjorkBadge } from "@/components/bjork-ui/primitives";export function Demo() { return <BjorkBadge variant="accent">Ready</BjorkBadge>;}
Props
variantdefault | secondary | outline | muted | accentControls emphasis from loud status to quiet metadata.
sizesm | md | lgKeeps status labels aligned across tables, cards, and compact controls.
childrenReactNodeAccepts a label or icon plus label. Icons are normalized to the badge size.
Default status
Use for high-contrast status where the label needs to be read immediately.
<BjorkBadge> <Check aria-hidden="true" /> Published</BjorkBadge>Muted status
Use for passive state labels that should sit behind primary controls.
<BjorkBadge variant="muted"> <Clock aria-hidden="true" /> Waiting</BjorkBadge>Accent status
Use sparingly for a fresh or active state. It shares the softened orange treatment.
<BjorkBadge variant="accent" size="md"> <Sparkles aria-hidden="true" /> New</BjorkBadge>Secondary status
Use for solid metadata that should be quieter than the default white badge.
<BjorkBadge variant="secondary"> Queued</BjorkBadge>Outline status
Use for draft and neutral states that need a boundary without a filled surface.
<BjorkBadge variant="outline"> Draft</BjorkBadge>Small badge
Use small badges inside table cells and dense rows.
<BjorkBadge size="sm" variant="outline"> Small</BjorkBadge>Medium badge
Use medium as the default size for card headers and filter labels.
<BjorkBadge size="md" variant="accent"> Medium</BjorkBadge>Large badge
Use large for status rows that need stronger scan weight.
<BjorkBadge size="lg" variant="secondary"> Large</BjorkBadge>