Design

Tags are used to label, categorise or highlight content in a compact form. They help users identify the status, context or type of information quickly and consistently. Tags may include an icon or a link depending on the use case.

When to use it (and when not to)

Use Tags when you need to:

Indicate the status or category of an element (e.g. Success, Danger, Information).
Display metadata or filters (e.g. search results, filters applied).
Highlight contextual links (when using the Has Link variant).

Avoid using Tags:

For primary actions — use buttons instead.
In bulk or dense layouts without clear hierarchy (as visual noise).
When a plain label or badge would suffice without interaction.

Quick summary of accessibility & consistency

Tags maintain minimum contrast and legibility across all variants.
Use tokenised colour and typography values for consistency across themes and surfaces.
Offer keyboard and screen reader support when interactive.
The component is built for consistency across themes and surfaces.

Properties

Anatomy

Tag

Direction: Horizontal

Alignment: Middle left

Item spacing: 32

Padding left: 8

Padding right: 8

icon-label

Direction: Horizontal

Alignment: Middle left

Item spacing: 4

Icon (Optional)

Depends on: Icon

Tag text

Text align: Left

Link Button (Optional)

Depends on: Link Button

Type: Standalone

Size: Small

Types

The Tag component supports five types: Success, Danger, Info, Inactive, Neutral. Each is available in two visual styles:

Bold — solid background
Subtle — tinted background with border

Subtle

Success

Tag

Background color:

color-fill-success-muted#c9e7ca

Border color:

color-border-success-subtle#4caf50

Tag text

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Danger

Tag

Background color:

color-fill-error-subtle#ffd0c9

Border color:

color-border-error-default#cc0000

Tag text

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Info

Tag

Background color:

color-fill-info-muted#c6e3ff

Border color:

color-border-info-subtle#0072f0

Tag text

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Neutral

Tag

Background color:

color-surface-neutral-muted#e5e9ed

color-surface-neutral-muted#e4e4e4

Border color:

color-border-neutral-default#282830

Tag text

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Bold

Success

Tag

Background color:

color-foreground-success-subtle#4caf50

Tag text

Text color:

color-foreground-contrast-default#fbfbfc

Danger

Tag

Background color:

color-fill-error-default#cc0000

Tag text

Text color:

color-foreground-contrast-default#fbfbfc

Info

Tag

Background color:

color-fill-info-subtle#0072f0

Tag text

Text color:

color-foreground-contrast-default#fbfbfc

Neutral

Tag

Background color:

color-surface-contrast-default#000000

Tag text

Text color:

color-foreground-contrast-default#fbfbfc

Styling

Colors

Name	Applied as	Applied to
`color-foreground-neutral-default`	Text color	Tag text (subtle)
`color-foreground-neutral-default`	Text color	Tag text (subtle)
`color-foreground-contrast-default`	Text color	Tag text (bold)
`color-foreground-contrast-default`	Text color	Tag text (bold)
`color-surface-neutral-muted`	Background color	Tag (neutral subtle)
`color-surface-neutral-muted`	Background color	Tag (neutral subtle)
`color-border-neutral-default`	Border color	Tag (neutral subtle)
`color-border-neutral-default`	Border color	Tag (neutral subtle)
`color-surface-contrast-default`	Background color	Tag (neutral bold)
`color-surface-contrast-default`	Background color	Tag (neutral bold)
`color-fill-success-muted`	Background color	Tag (success subtle)
`color-fill-success-muted`	Background color	Tag (success subtle)
`color-border-success-subtle`	Border color	Tag (success subtle)
`color-border-success-subtle`	Border color	Tag (success subtle)
`color-foreground-success-subtle`	Background color	Tag (success bold)
`color-foreground-success-subtle`	Background color	Tag (success bold)
`color-fill-error-subtle`	Background color	Tag (danger subtle)
`color-fill-error-subtle`	Background color	Tag (danger subtle)
`color-border-error-default`	Border color	Tag (danger subtle)
`color-border-error-default`	Border color	Tag (danger subtle)
`color-fill-error-default`	Background color	Tag (danger bold)
`color-fill-error-default`	Background color	Tag (danger bold)
`color-fill-info-muted`	Background color	Tag (info subtle)
`color-fill-info-muted`	Background color	Tag (info subtle)
`color-border-info-subtle`	Border color	Tag (info subtle)
`color-border-info-subtle`	Border color	Tag (info subtle)
`color-fill-info-subtle`	Background color	Tag (info bold)
`color-fill-info-subtle`	Background color	Tag (info bold)

Spacing

Name	Applied as	Applied to
`spacing-sm`	Padding inline	Tag
`spacing-sm`	Padding inline	Tag
`spacing-2xs`	Gap	Icon to Tag text
`spacing-2xs`	Gap	Icon to Tag text
`spacing-4xl`	Gap	Tag text to Link
`spacing-4xl`	Gap	Tag text to Link
`stroke-sm`	Border width	Tag
`stroke-sm`	Border width	Tag

Appearance on backgrounds

Tags are designed for light mode only. They are intended for use inside cards, which always have a white or near-white background. They are not tested for use on dark or coloured surfaces.

Contrast adjustments:

All subtle variants include a border to enhance visibility.
All text elements meet WCAG AA contrast: Text 3:1 (as part of UI component), Link 4.5:1 or higher.

Usage

Do

Guidance on how to use a component.

Use tags to clarify type or status.
Combine with links when contextually relevant.
Keep labels short and clear.

Don’t

Guidance on what to avoid when using a component.

Don’t use tags as buttons.
Don’t place tags over dark backgrounds.
Don’t include too many in a small space.