Square Badge
A badge with sharp square corners and a compact footprint. Use it for crisp version tags, counts, or labels that suit a structured grid layout.
A badge with sharp square corners and a compact footprint. Use it for crisp version tags, counts, or labels that suit a structured grid layout.
Search blocks by description or jump to a page.
Square Badge renders four badge variants side by side in a centered, wrapping row. Each badge carries sharp square corners and a short label: Default (filled), Secondary (muted fill), Destructive (alert fill), and Outline (bordered with no fill). The result is a tight horizontal cluster that shows every tone available in the badge set at once.
All four variants are independent. You can drop in just the one or two tones your interface actually needs, swap the label text, or reorder the row. Nothing in the layout depends on having all four present, so removing an unused variant takes one line.
Reach for this block when you need clean, rectilinear labels that sit flush inside a structured grid or data table. The flat corners suit an AI assistant product where the UI favors precision over softness: model version tags, response confidence levels, tool status labels, and similar metadata read clearly without rounded styling introducing visual noise. Compared to the Elevated Badge or 3D Badge, this variant stays flat and assertive, which works well when many badges appear in the same view at once.
A natural flow around it on a Components page:
Before
After
Each badge is an independent label you can tune for your product:
Tip: pair the Destructive variant sparingly alongside the others so its alert tone retains meaning and does not blend into routine labels.