About this block

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.

When to use

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

• Buttons to establish the core interactive palette before introducing purely informational labels
• A short section header or description row to give the badges context

After

• Cards where the square badges can appear as inline status or category tags inside each card
• Tabs when the interface organizes content into sections and the badges need to reflect active states

What you can customize

Each badge is an independent label you can tune for your product:

• Label text. Replace "Default", "Secondary", and the rest with your own terms such as model names, confidence tiers, or pipeline stages.
• Variant selection. Keep only the fill tones your design uses and remove the others so the row stays uncluttered.
• Order and count. Rearrange the badges or add new ones to cover additional states without changing the wrapping row layout.

Tip: pair the Destructive variant sparingly alongside the others so its alert tone retains meaning and does not blend into routine labels.