Ribbon Badge
A badge styled as a corner ribbon that drapes over a card edge. Use it to flag sale, new, or sold out states across product and gallery tiles.
A badge styled as a corner ribbon that drapes over a card edge. Use it to flag sale, new, or sold out states across product and gallery tiles.
Search blocks by description or jump to a page.
Ribbon Badge shows four badge variants side by side in a centered, wrapping row. Each badge has a short left tab, a narrow vertical strip that shares the badge color and sits just behind the left edge, giving the whole unit the look of a folded ribbon end. The four variants are Default, Secondary, Destructive, and Outline, so you can see the ribbon treatment across the full badge color range at once.
Each badge is self-contained and independent. You can drop any single variant into your layout, swap the label text, or remove variants you do not need. The tab strip automatically matches whichever color token the badge uses, so the ribbon effect holds without extra work when you change the variant.
Reach for this block when a flat pill badge reads as too ordinary for the context. In a project management workspace it works well on card grids where tasks, sprints, or deliverable groups need a status label that stands apart from surrounding text. The ribbon shape draws the eye to the tag without relying on size or animation, which keeps busy board views readable.
A natural flow around it on a Components page:
Before
After
Any of the four variants can be used alone or together to mark distinct states across a card grid or list view.
Tip: position the ribbon badge at the top-left of a card rather than inline in text so the tab strip has a clean edge to hang against.