Bounce Badge
A badge with a springy bounce animation that draws the eye on entry. Use it to flag new arrivals or fresh updates that should grab attention.
A badge with a springy bounce animation that draws the eye on entry. Use it to flag new arrivals or fresh updates that should grab attention.
Search blocks by description or jump to a page.
Bounce Badge is a row of four badges in a centered, wrapping flex container. Each badge uses a standard variant (default, secondary, destructive, and outline) and plays a looping vertical bounce animation on entry. The four badges fire in a staggered sequence, each delayed slightly behind the last, so the motion ripples across the row rather than hitting all at once.
All four badges are independent of each other. You can use any one in isolation, swap in your own label text, or adjust how many appear in the row. The stagger delays are separate CSS classes, so you can drop or reorder them freely without affecting the others.
Reach for this block when you want a small cluster of status labels or category tags to announce themselves on page load. It suits a listing card header, a sidebar filter set, or a property detail page where a short row of tags (listing status, property type, availability) needs to catch the eye before the reader scans the main content. Compared to a static row of badges, the motion communicates freshness and draws attention without relying on color alone, which makes it a natural fit for a real estate marketplace where new listings need to stand out.
A natural flow around it on a Components page:
Before
After
Each badge label and variant is fully swappable, so you can adapt the row to match any set of statuses or categories:
Tip: limit the row to three or four badges so the stagger reads as a quick sequence rather than a drawn-out parade.