React Badge Examples — Variants, Icons, Counts, Status

Drivn's Badge ships five variants, each referencing a design token so colors adapt to your theme automatically. default uses the primary accent with a soft translucent background; secondary uses the secondary token for a lower-emphasis alternative; success uses the success token for green pills that signal healthy or active states; outline drops the fill entirely and renders only a border with muted text, appropriate for tags and categories; destructive uses the destructive token for error, failure, or danger states.

The variants are a single prop away — no cva, no forwardRef, no configuration. Drop the badge inline with any text, inside a card header, alongside a table cell, or as a decorator on a list item.

Pairing an icon with a single word gives a badge roughly double the communicative density. A checkmark next to "Active", a warning triangle next to "Failed", a clock next to "Pending" — the icon registers preattentively and the word confirms the meaning.

Drivn's Badge has gap-1.5 built into its base class, so an icon and text render with consistent spacing without any flex wrapper or gap utility at the call site. Size the icon with w-3 h-3 (12 px) to match the text-xs label, and the pair sits balanced inside the px-2.5 py-0.5 padding of the badge container. Every variant inherits the same gap, so icon layout stays uniform regardless of color.

Notification counts — the red "3" on the bell icon in an app header — are one of the most common badge patterns. Wrap the Button and the badge in a relative inline-flex container, absolutely position the badge to the top-right with -top-1 -right-1, and trim the padding with px-1.5 py-0 so single-digit counts fit cleanly.

Because Drivn's Badge uses rounded-full and inline-flex items-center at the base level, a single-digit count renders as a tight circle without any extra className. For counts above 99, render 99+ as the child instead of the raw number so the badge width stays bounded. The destructive variant is the conventional choice — red for unread is a universally-parsed signal, so users register the count without reading.

Data tables that list orders, deployments, users, or invoices almost always want a status column with color-coded pills. Put a Badge in the cell renderer with the variant mapped to the status value — success for healthy or completed, destructive for failed or error, outline for neutral draft states, secondary for pending or in-progress.

The data table component's cell renderer receives the row data, so the mapping logic lives in a small helper object that returns the correct variant for each status string. Because the Badge uses text-xs by default, the row height stays aligned with surrounding cells without any vertical-alignment tweak. The pattern scales identically whether the table has ten rows or ten thousand — one component, one mapping, one pill per cell.

In real applications, badge content usually comes from a database row or API response — a user's plan tier, a feature's release state, the current deployment ring. Define a small mapping object so the label-and-variant transformation lives in one place, then pass the server value through it at render time.

For lists of many categorical tags — blog post categories, product filters, user skills — pair the outline variant with the same mapping pattern to render each tag consistently. If the list has an overflow cap, slice the array, render visible badges, and show a +N counter for the remainder using the same Badge component with a subdued variant. Because the mapping is a plain object, adding a new tier or tag is a one-line edit, and TypeScript's inference keeps the variant prop type aligned automatically.