revido kit
Start building
← All components
data-display / stable

Badge

Pill-shaped label: a soft tint plus text for a category, count or state.

LIVE PREVIEW
Loading preview…

When to use

  • Categories, tags and counts next to a title or in a table cell.
  • A compact state that is not a work-item status (e.g. Draft, Overdue, Beta).

Consider an alternative

  • Work-item status (todo, in progress, done) — use StatusLabel (icon + text).
  • Actions — a Badge is not clickable; use a Button or a chip control.
  • Long text — keep it to one or two words.

Import

import { Badge } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

sizeBadgeSize"md"`sm` 20px (dense tables), `md` 24px (default).
tone"danger" | "info" | "neutral" | "primary" | "success" | "warning"—Colour role. Defaults to `neutral`.
variant"dot" | "outline" | "soft"—`soft` (tint + coloured label, default), `outline`, or `dot` (coloured dot + neutral label).
childrenReactNode—
classNamestring—

Examples

Tones × variants

Soft is the default; outline for quieter rows; dot keeps the label neutral.

<Badge tone="success">Paid</Badge>
<Badge tone="warning" variant="outline">Due soon</Badge>
<Badge tone="danger" variant="dot">Overdue</Badge>

Sizes

md (24px) by default; sm (20px) in dense tables.

<Badge size="sm">Beta</Badge>
<Badge>Beta</Badge>

With icon

Badge has no icon prop: put a Lucide icon before the label. It is sized to 12px automatically; mark it aria-hidden so the label carries the meaning.

<Badge tone="success"><Check aria-hidden />Approved</Badge>
<Badge tone="warning" variant="outline"><AlertTriangle aria-hidden />Due soon</Badge>
<Badge size="sm" tone="info"><Info aria-hidden />Sent</Badge>

Notification counts

Soft fills are opaque, so the bell cannot show through an overlapping count. The button announces the unread count; the badge is decorative.

<Button variant="ghost" size="icon-sm" className="relative" aria-label="Notifications (62 unread)">
  <Bell aria-hidden />
  <Badge size="sm" tone="primary" className="absolute -top-1 -right-1" aria-hidden="true">62</Badge>
</Button>

In a row

A proposal row: title, client and a state badge.

<Badge size="sm" tone="info">Sent</Badge>

Related components