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.

Any table listing deployments, orders, invoices, or users ends up with a status column, and a color-coded pill is the fastest way to make that column scannable. Keep the status-to-variant mapping in one plain object beside the column definition, then index into it from the cell renderer — success for healthy or completed, destructive for failed, secondary for pending or in-flight, outline for archived or draft.

The data table hands the whole row to the cell renderer, so the mapping stays a pure lookup with no branching logic inside JSX. Typing the object as Record<Status, ...> makes the compiler flag a missing case the moment you widen the status union, which is what keeps a new status from silently rendering an undefined variant. Because the Badge is text-xs with py-0.5 padding, row heights stay flush with plain-text cells and no vertical-alignment class is needed. The same object works in a card list or a detail header, so one mapping serves every surface that shows the status.

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.