Navigation
Tag
Tags are used to classify content, typically using keywords.
Interactive demo
This demo allows you to preview the tag component, its variations, and configuration options.
Anatomy
The tag contains two required elements and one optional element.
| Item | Name | Description | Component | Optional |
|---|
Options
The tag has options that can be used to provide an appropriate experience for different use cases.
Size
There are three sizes of tag: small, medium, and large.
Icons (leading & trailing)
Icons can be displayed in a tag and can be positioned either before (leading) or after (trailing) the label in the tag.
Label
Labels can be displayed in a tag. A label can give more context to what a tag indicates.
Size
There are three sizes of tag: small, medium, and large.
Icons (leading & trailing)
Icons can be displayed in a tag and can be positioned either before (leading) or after (trailing) the label in the tag.
Label
Labels can be displayed in a tag. A label can give more context to what a tag indicates.
States
The tag has the following states:
Base
The tag has a base state. This is the base style of the tag before it has been interacted with by a user.
Hover
The tag has a hover state. The style of the tag changes to visually communicate and provide feedback to the user that the tag is an interactive element.
Focus
The tag in a focus state communicates that a user has highlighted a tag, using an input method such as a keyboard or voice.
Active
The tag has an active state. The style of the tag changes to visually communicate and provide feedback to the user that the tag has been interacted with.
Behaviours
The following guidance describes how a tag behaves.
Fixed and full width
Tags can be displayed in two ways, but consideration should be made to how they will respond and react to containers around them:
Fixed width - size dependent on content (label, icons).
Full width - size responsive to the container it is applied to.
Fixed and full width
Tags can be displayed in two ways, but consideration should be made to how they will respond and react to containers around them:
Fixed width - size dependent on content (label, icons).
Full width - size responsive to the container it is applied to.
Usage
Here’s how and when to use tags:
Do make sure tags relate to the content
Tags should always have a direct relationship to the content they represent.
Don't make tags too wide
Avoid using full-width tags in wide containers. They are generally appropriate for small devices or contained components.
Do make sure tags have sufficient clearance
Do allow a sufficient hit area when placing two or more tags inline make sure they are a sufficient size or have spacing between them to avoid users accidentally hitting the wrong tag.
Don't have multiple words for labels
Avoid having multiple words for tag labels. They should be short and clear.
Accessibility considerations
The tag has the following accessibility considerations:
| Order | Element | Role |
|---|
| Command | Description |
|---|
| Element | Attribute | Value | Description | User supplied |
|---|
SEO
Tags are good for site navigation (for crawlers and users).
Ensure icons have alt text applied.
API
The tag has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|