Icon Badge
A badge that pairs a small icon with a label for instant meaning. Use it to tag categories, statuses, or actions where text alone reads slowly.
A badge that pairs a small icon with a label for instant meaning. Use it to tag categories, statuses, or actions where text alone reads slowly.
Search blocks by description or jump to a page.
Icon Badge displays four badge variants side by side in a centered, wrapping row. Each badge pairs a small icon on the left with a short label on the right. The four variants shown are default (filled), secondary (muted), destructive (red), and outline (bordered). The icons used are a check circle, an info circle, an X circle, and a warning triangle, each sized to sit flush with the text cap height.
All four variants are independent. You can drop any single one into your interface, swap the icon for another from the same icon library, and change the label copy without affecting the others. The wrapping row layout means you can show two badges or six without rewriting any structure.
Reach for this block when a plain text label reads too slowly and a small icon can carry the meaning in an instant. In a healthcare scheduling product this pattern is a natural fit for appointment status chips: a check for confirmed, a warning for pending, an X for cancelled, and an info marker for a note attached to the booking. It works equally well on a table row, inside a card header, or alongside a patient or provider name wherever the status needs to register at a glance rather than be read word by word.
A natural flow around it on a Components page:
Before
After
The straightforward fit is status labels that carry a clear emotional signal. A few other ways to use the frame:
Tip: keep the label to one or two words so the icon and text read as a single unit rather than a sentence that happens to have a picture.