Search blocks by description or jump to a page.
An oversized badge with generous padding and bold text for high visibility. Use it on hero areas or banners where a tag must read from a distance.
Extra Large Badge renders four badge variants side by side in a centered, wrapping row. Each badge carries generous horizontal and vertical padding with base-size bold text, so the label stays readable at a glance even when placed against a busy background. The four variants shown are Default, Secondary, Destructive, and Outline, giving you the full tone range in one preview.
All four variants are independent pieces. You can drop in whichever subset you need, swap the label text to match your product vocabulary, and remove any variant that does not fit your color scheme. The layout wraps automatically, so the row adapts cleanly to narrower containers without extra configuration.
Reach for this block when a label needs to hold its own on a high-impact surface. On an ecommerce storefront it works well for sale, new arrival, or limited edition callouts placed in a hero banner or above a product title, where a standard-size badge would disappear into the surrounding copy. Compared to the Large Badge, this variant reads from farther away and commands more visual weight, making it a better fit for top-of-page placements than for dense listing cards.
A natural flow around it on a Components page:
Before
After
Drop in whichever label text matches the moment you are marking. A few focused uses:
Tip: pick one variant per surface and stay consistent across a page so the badge retains its signal value rather than becoming decoration.