Add short labels
Use badges for compact status, category, or count labels.
Components
Badge
Badges can be used to highlight important bits of information such as labels, notifications and status.
Show status quickly
Colour variants help users scan states such as active, warning, or danger.
Support dense layouts
Badges add meaning beside text while keeping rows and cards compact.
1
Container
2
Content
3
Icon (optional)
Variants
Badge variants use colour to convey meaning at a glance. Each variant signals a different status or category.
The default tone for generic labels with no particular status weight. Use when the badge is purely informational, whether you need a stronger filled style or a quieter outlined style.
Outlined
Controls whether the badge uses a filled or outlined style. Outlined gives the badge a lighter visual presence.
The default filled style uses a solid background. Use when badges need to read strongly at a glance across the full variant set.
Dismissible
Add a close button when the user should be able to remove the badge. For example, active filters or removable tags.
Use when the badge is informational only and should not be removed by the user.
Icon
Pair the badge with an icon when a visual cue helps users recognise meaning faster than the text alone.
Add an icon through the icon slot. Use small, recognisable icons that reinforce the badge's meaning without competing with the label.
Full width
Use full width when the badge needs to align to the width of its container.
Use the default width for short inline labels.
Design tokens used
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-padding-xs4pxsgds-padding-none—sgds-padding-3-xs—sgds-border-radius-sm—sgds-close-btn-border-radius—sgds-border-width-11pxsgds-font-size-label-xs—sgds-line-height-3-xsHeight variessgds-dimension-192—sgds-dimension-24—When to use
- Use badge for short supporting labels such as status, count, or category.
- Use it when a small visual cue helps users interpret nearby content more quickly.
When not to use
- Do not use badge as the main message or action on the page.
- Do not put long sentences inside a badge.
Keep the badge short
A short status or category label works best because users can read it at a glance.
Do not put sentences inside a badge
Long badge text is hard to scan at a glance and stops looking like a label.
Built-in accessibility
- Badges work as visual labels for status, count, or category information.
- The component does not add custom keyboard behaviour.
Labels and content
- Use clear badge text instead of relying on colour alone.
- Keep the badge close to the content it describes.
Focus and interaction
- Do not make badges focusable unless they are paired with an interactive control.
- If the badge changes status, make sure the surrounding content explains the change.
This component does not have a separate keyboard interaction table because:
- Badges are visual labels for status, count, or category information.
- They should not receive focus unless they are part of another interactive control.
Have suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/components/badge