Badge
cds-badge
The Badge Component is a UI element used to highlight attributes or statuses within an app. It appears as a small colored indicator overlaid on buttons, avatars, or notifications, commonly denoting achievements or notifications.
Default
- Variant:
--accent - Size:
--medium
Default badge
Default badge
<div class="cds-badge">
<span class="cds-badge__text">Default badge</span>
</div>
Elements
| Element | Code | Parent | HTML tag | Required |
|---|---|---|---|---|
| Text | cds-badge__text | Block: cds-badge | <span> | required |
Modifiers
| Modifier | Options |
|---|---|
| Variant | --accent, --primary, --secondary, --inverse |
| Size | --medium, --large |
| Alt color | --color-1, --color-2, --color-3 ... --color-10 |
Variant
Accent
Primary
Secondary
Inverse
<div class="cds-badge cds-badge--accent">
<span class="cds-badge__text">Accent</span>
</div>
Size
Medium
Large
<div class="cds-badge cds-badge--large">
<span class="cds-badge__text">Large</span>
</div>
Alternative colors
+99
+99
+99
+99
+99
+99
+99
+99
+99
+99
<div class="cds-badge cds-badge--color-1">
<span class="cds-badge__text">+99</span>
</div>
States
| Modifier | Options |
|---|---|
| States | is-highlighted |
Is highlighted
+99
+99
+99
+99
+99
+99
+99
+99
+99
+99
Example
<div class="cds-badge cds-badge--color-10 is-highlighted">
<span class="cds-badge__text">+99</span>
</div>