Badge
Badge displays a short label with its own background and typography. Use it for a status or category label beside related content.
Add and configure Badge
- Click Add, choose Badge, and place it in the container.
- Set Content > Content > Text.
- Configure Design > Badge, Typography, and Spacing.
- Save your changes.
This element has no children; use its own controls.
Controls
Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”
Content > Content
| Setting | Purpose and options | Behavior |
|---|---|---|
| Text | Visible text. | Shared |
Design > Badge
| Setting | Purpose and options | Behavior |
|---|---|---|
| Background | Color or supported fill. | Shared |
| Padding | spacing controls. | See linked controls |
| Border | Color or supported fill. | Shared |
| Radius | Radius and unit. | Shared |
Design > Typography
| Setting | Purpose and options | Behavior |
|---|---|---|
| Typography | typography controls. | See linked controls |
Design > Spacing
| Setting | Purpose and options | Behavior |
|---|---|---|
| Spacing | spacing controls. | See linked controls |
Troubleshooting
The label is clipped
Check badge padding, font size, and the space available in its parent container.
Visitors cannot distinguish the status
Use clear text and sufficient contrast rather than relying only on a badge color.