3D Badge
A badge with layered shadows and depth that lifts off the surface. Use it to spotlight a featured tag or premium label that needs to stand out.
A badge with layered shadows and depth that lifts off the surface. Use it to spotlight a featured tag or premium label that needs to stand out.
Search blocks by description or jump to a page.
3D Badge renders four badge variants side by side in a centered, wrapping row: Default, Secondary, Destructive, and Outline. Each badge carries a shallow offset shadow that makes it sit above the surface. When a pointer moves over a badge it lifts slightly and the shadow deepens, reinforcing the raised appearance.
The four variants are independent. You can swap any label text, drop variants you do not need, or reorder them without touching the others. The hover lift is purely visual, so none of the badges require an onClick handler unless you add one.
Reach for this block when a label needs physical weight, not just color. On a logistics and delivery platform it works well for shipment status tags where "In Transit," "Delivered," and "Exception" must read as distinct objects at a quick scan rather than flat text annotations. The lift on hover gives operators a clear affordance if the badges are also clickable filters.
A natural flow around it on a Components page:
Before
After
The block ships four variants out of the box, covering the main semantic roles a badge fills. A few directions to take it:
Tip: if you place these badges inside a dense table or card grid, keep the labels to one or two words so the shadow stays visible and the lift reads cleanly at small sizes.