Design System
Badge
Small status label used to highlight categories, states, or metadata. Implemented for both Suite Desktop and eShop — switch tabs to see the platform-specific variants and tokens.
Playground
Intent
Five color intents to convey different semantic meanings.
Size
Medium (default) and small for compact contexts.
Icons
Optional left and/or right icons. Defaults to the intent's standard icon when set to true.
When to Use
Best for
- Indicating status or category of an item (success, warning, error)
- Labeling metadata alongside other content (tags, types, severity)
- Drawing attention to key information without interrupting flow
Consider alternatives when
- The information requires user action — use a banner or alert instead
- The label is interactive (clickable/dismissable) — use a chip or tag component
Props
| Prop | Type | Required | Description |
|---|---|---|---|
label | string | Yes | Text content of the badge |
intent | "brand" | "neutral" | "critical" | "warning" | "info" | No | Color scheme (default: "brand") |
size | "medium" | "small" | No | Size variant (default: "medium") |
iconLeft | boolean | ReactNode | No | Left icon — true for default intent icon, or a custom element |
iconRight | boolean | ReactNode | No | Right icon — true for default intent icon, or a custom element |
Import
import { Badge } from '@/components/Badge/suite/desktop';Design Tokens
| Purpose | Token |
|---|---|
| Background (brand) | var(--v1-color-bg-primary-subtle-on-elevation-0) |
| Background (neutral) | var(--v1-color-bg-tertiary-default-on-elevation-0) |
| Background (critical) | var(--v1-color-bg-alert-red-subtle-on-elevation-0) |
| Background (warning) | var(--v1-color-bg-alert-yellow-subtle-on-elevation-0) |
| Background (info) | var(--v1-color-bg-alert-blue-subtle-on-elevation-0) |
| Text (brand) | var(--v1-color-text-primary-default) |
| Text (neutral) | var(--v1-color-text-subdued) |
| Text (critical) | var(--v1-color-text-alert-red) |
| Text (warning) | var(--v1-color-text-alert-yellow) |
| Text (info) | var(--v1-color-text-alert-blue) |
| Border radius | var(--primitive-radius-full) |
| Horizontal padding | var(--primitive-spacing-8) |
| Gap | var(--primitive-spacing-4) |