Hover Scale Badge
A badge that grows slightly when the pointer rests on it. Use it for interactive tags or filters where a touch of feedback invites a quick click.
A badge that grows slightly when the pointer rests on it. Use it for interactive tags or filters where a touch of feedback invites a quick click.
Search blocks by description or jump to a page.
Hover Scale Badge shows four badge variants arranged in a centered, wrapping row. The variants are Default, Secondary, Destructive, and Outline. When the pointer rests on any badge it grows slightly and picks up a soft shadow, giving each tag a clear interactive signal without any extra chrome around it.
All four variants and their labels are independent. You can keep only the ones your interface needs, reorder them, or swap the label text for whatever tags your product uses. The scale and shadow behavior is shared across all variants, so adding more badges carries the same feel automatically.
Reach for this block when you need a compact set of clickable status or category tags that should feel obviously tappable. It is a natural fit on a fintech dashboard where account tags, risk labels, or transaction filters need to respond visibly to the pointer without taking up extra space. Compared to a static badge row it gives immediate feedback; compared to a full button row it stays light and inline.
A natural flow around it on a Components page:
Before
After
A few ways to put these interactive badges to work:
Tip: pair the Destructive variant with genuine warning states only so the red color keeps its meaning and does not read as decoration.