Large Badge
A roomy badge with extra padding and larger text for clear reading. Use it to highlight a plan tier, count, or status across busy interfaces.
A roomy badge with extra padding and larger text for clear reading. Use it to highlight a plan tier, count, or status across busy interfaces.
Search blocks by description or jump to a page.
Large Badge shows four badge variants side by side in a centered, wrapping row: Default, Secondary, Destructive, and Outline. Each badge carries extra horizontal padding and a slightly larger text size compared to the standard badge, so the label reads clearly at a distance without competing with nearby content.
The four variants are independent of each other. You can keep all four as a reference palette, drop down to just one or two for a specific use case, or swap the label text to match your own status vocabulary. No variant is wired to behavior, so each one is purely a presentational slot you fill with whatever copy fits.
Reach for this block when you need a badge that must read clearly alongside dense content, such as a course status row on a student dashboard, a plan tier label on an enrollment card, or a completion state on a learning module. Because it is larger than the default badge, it holds its own in interfaces where other elements compete for attention. The Outline variant works well on light card surfaces and the Destructive variant suits overdue or failed states. For a badge that also needs an icon beside the label, see the Icon Badge instead.
A natural flow around it on a Components page:
Before
After
All four variants are ready to carry real labels from the moment you drop the block in. A few ways to put them to use:
Tip: pick one variant per semantic role and stick to it across your interface so learners build a consistent mental model fast.