Why?
Tags provide a visual way to identify, label or highlight an item. For example, to highlight a new or updated piece of guidance with a list.
Usage
Use within a card component or alpha/beta banner component, or within a list to label items.
Variants
Standard
Example
This is a standard tag Tag
Source
<p>
This is a standard tag
<span class="tag">Tag</span>
</p>
Phase
See also phase banners.
Example
Use tags to denote service phase: Alpha
Or anywhere else, e.g. a list
- An alpha service Alpha
- A beta service Beta
- A live service Live
Source
<p>
Use tags to denote service phase:
<span class="tag tag--alpha">Alpha</span>
</p>
<p>
Or anywhere else, e.g. a list
</p>
<ul>
<li>
An alpha service <span class="tag tag--alpha">Alpha</span>
</li>
<li>
A beta service <span class="tag tag--beta">Beta</span>
</li>
<li>
A live service <span class="tag tag--live">Live</span>
</li>
</ul>
Guidance
Use tags to denote the status of guidance in lists etc. Usually used within a card component.
Example
- New guidance New
- Updated guidance Updated
- Guidance in consultation In consultation
Source
<ul>
<li>
New guidance <span class="tag tag--new">New</span>
</li>
<li>
Updated guidance <span class="tag tag--updated">Updated</span>
</li>
<li>
Guidance in consultation <span class="tag tag--consultation">In consultation</span>
</li>
</ul>
Impact
Use impact tags sparingly, e.g. within phase banners.
Example
This is an impact tag Alpha
Source
<p>
This is an impact tag
<span class="tag tag--alpha tag--impact">Alpha</span>
</p>
Flush
Tags have a small margin by default. Use the .tag--flush modifier to remove the margin:
Example
This is an flush tag Flush
Source
<p>
This is an flush tag
<span class="tag tag--flush">Flush</span>
</p>
Outline
Use the .tag--outline modifier for a tag with a border. Use outline tags with filtered lists to show the currently applied filters.
Example
This is an outline tag Outline
Source
<p>
This is an outline tag
<span class="tag tag--outline">Outline</span>
</p>
Removeable
Use removeable tags when users need to be able to remove or dismiss a tag. Use with outline tags at the top of filtered lists to show the currently applied selections.
Example
This is a removeable tag Removeable Remove this filter
Source
<p>
This is a removeable tag
<span class="tag tag--outline">
Removeable
<a href="/nice-design-system" class="tag__remove">
<span class="icon icon--remove" aria-hidden="true"></span>
<span class="visually-hidden">Remove this filter</span>
</a>
</span>
</p>