Tags

Tags are used to label, categorise, or indicate status. They help users quickly scan and identify content types.

Tag Variants

Choose the appropriate variant based on the meaning you want to convey.

<span class="tag tag-default">Default</span>
<span class="tag tag-primary">Primary</span>
<span class="tag tag-success">Success</span>
<span class="tag tag-warning">Warning</span>
<span class="tag tag-error">Error</span>
<span class="tag tag-info">Info</span>

Semantic Usage

Use tag colours consistently to convey meaning:

Status indicators

Content labels

Example: Document Status

Usage Guidelines

Do

• Use tags sparingly to highlight important information
• Keep tag text short (1-2 words)
• Use consistent colours for the same meanings
• Position tags near the content they describe

Don't

• Don't use too many tags in one area
• Don't rely on colour alone - include descriptive text
• Don't use tags for primary navigation
• Don't use inconsistent colours for the same meanings

Accessibility

• Tag colours meet contrast requirements
• Text content conveys meaning (not colour alone)
• Tags are not interactive by default (use buttons for actions)

CSS Classes

.tag { }

/* Variants */
.tag-default { }
.tag-primary { }
.tag-success { }
.tag-warning { }
.tag-error { }
.tag-info { }