Skip to content

Badge

In the app

Counts and tags with no semantic meaning. Status carries meaning; Badge carries a number or a word.

@varick/ui/components/badgeAdded 2 Sept 2026

24Finance3 selected Add tag

Usage

import { Badge } from "@varick/ui/components/badge";

export function Example() {
  return (
    <h3>Agents <Badge>{agents.length}</Badge></h3>
  );
}

Variants

Count, beside a heading

Agents 24
<Badge>24</Badge>

Outline, a tag

Finance
<Badge variant="outline">Finance</Badge>

Accent, a selection

3 selected
<Badge variant="accent">3 selected</Badge>

Dashed, a suggestion

Add tag
<Badge variant="dashed"><PlusIcon /> Add tag</Badge>

API reference

Every component also accepts className and the native props of its root element.

PropTypeDefaultDescription
variant'count' | 'outline' | 'accent' | 'dashed''count'Count next to a heading; outline for tags; accent for selection; dashed for suggestions.
childrenReactNoderequiredA number or one word.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.count-chip { font-size: 11px; font-weight: 500; color: var(--fg-mid); background: var(--fill); border: 1px solid var(--hairline-soft); border-radius: 4px; padding: 1px 9px; }
.chip { font-size: 12px; font-weight: 500; color: var(--fg-mid); border: 1px solid var(--hairline-soft); background: var(--fill-soft); border-radius: 4px; padding: 4px 11px; }
.selected-badge { font-size: 12px; font-weight: 500; color: var(--accent); background: var(--accent-fade); border-radius: 4px; padding: 3px 9px; }
.tag-suggest { border: 1px dashed var(--hairline); border-radius: 4px; padding: 3px 10px; font-size: 11.5px; font-weight: 500; color: var(--fg-mid); }
.tag-suggest:hover { border-color: var(--accent); color: var(--accent); }