Search blocks by description or jump to a page.
A badge raised above the surface with a soft drop shadow. Use it to mark a priority label or count that should read as floating above content.
Elevated Badge shows four badge variants side by side in a centered, wrapping row. Each variant carries a drop shadow that deepens when the pointer moves over it, so the badges appear to lift further off the surface on hover. The four variants are Default, Secondary, Destructive, and Outline, giving you a ready comparison of every standard badge style in elevated form.
The label text, variant selection, and number of badges are all independent. You can keep only the variants relevant to your interface, swap in your own labels, or add further badges to the row without affecting the shadow behavior. The hover transition is self-contained on each badge, so removing one does not disturb the others.
Reach for this block when you need to present status labels, metric tags, or priority markers that must read clearly against a dense dashboard surface. In a product analytics context the elevated treatment helps a badge like "Critical" or "Active" stand out from chart backgrounds and data grids, where a flat label would disappear into the page. The shadow depth makes each badge feel actionable compared to a purely decorative flat variant.
A natural flow around it on a Components page:
Before
After
All four variants share the same shadow and hover behavior, so swapping labels or trimming the set is straightforward:
Tip: pair the Default and Destructive variants in the same row when you need to show a healthy state alongside an error state at a glance.