Tag
Use tags to label, categorize, or organize items using keywords that describe them.
Table of Contents
Edit this section, Opens in new windowOverview
Multiple or single tags can be used to categorize items.
Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
Variations
| Type | Purpose |
|---|---|
| Category tags | Category tags help to categorize or organize items. Multiple or single tags can be used to categorize items. |
| Filter tags | Filter tags are interactive labels that represent selected filtering options. Filter tags can be added and removed. |
| Input tags | Input tags represent keywords in input field. Input tags can be removed. |
| Status tags | Status tags represent status of item. Status tags use semantic colors to communicate status of item. |
Usage
Sizing
Tags is available in two different sizes; normal and small:
Category tags
Category tags help to categorize or organize items. Multiple or single tags can be used to categorize items.
Usage
Use category tags when content is mapped to multiple categories, and the user needs a way to differentiate between them. Colored variation of category tags can be used to bring more attention to them.
A category tag can be in a list.
A category tag can also be a standalone element.
Behaviours
List of category tags should be arranged horizontally. When horizontal space is limited in a tag group, the individual tags wrap to form another line. Category tags can act as a links to filtered lists of items tagged with them.
The category tag has special behaviours. However, it can be a link. See next section for documentation.
Interactions
A category tag can be interactive, i.e. a link:
Hover
- The outline color is BL 1 DARK, DARK BLUE
- The text color is BL 1 DARK, DARK BLUE
Focus
- The color used for the focus ring is BL 1, BLUE
Active
- The outline color is BL 1 DARK, DARK BLUE
- The text color is BL 1 DARK, DARK BLUE
Modifiers
Colors
A category tag can have different fills:
- The fill color is CY 3, LIGHT YELLOW
- The fill color is CG 3, LIGHT GREEN
- The fill color is CR 3, LIGHT RED
- The fill color is CB 3, LIGHT BLUE
Passive
- The outline color is LB 1, LIGHT BROWN
- The text color is LB 1, LIGHT BROWN
Filter tags
Filter tags are interactive labels that represent selected filtering options. Filter tags can be added and removed.
Usage
A filter tag is a tag that is put together with other filter tags inside a filter container. It is NOT part of several tags in a list.
A filter tag can be together with other filter tags, inside a context
Anatomy
- The fill color is transparent, the outline color is LB 1, LIGHT BROWN 20%
- The text color is LB 1, LIGHT BROWN
- The icon fill color is LB 1, LIGHT BROWN
- The icon stroke color is BE 5, LIGHTEST BEIGE
Behaviours
Interactions
Hover
A filter tag can be hovered
- The text, outline and icon fill color is BL 1, BLUE
Focus
A filter tag can be focused
- The color used for the focus ring is CB 3, LIGHT BLUE
Click
A filter tag can be removed.
When the tag is clicked, the class .animation-fade-out is added, it fades out and should be removed from the DOM.
<button class="if tag animation-fade-out" type="button">Orwell</button>Input tags
Input tags represent keywords in input field. Input tags can be removed.
Usage
Use input tags when multiple input values are expected from user. Input values can be suggested by system.
A input tag can be together with other input tags, inside a context
Anatomy
- The fill color is LB, LIGHT BROWN
- The text color is BR 1, BROWN
- The icon fill color is BR 1, BROWN
- The icon stroke color is BE 5, LIGHTEST BEIGE
Behaviours
Interactions
Hover
A input tag can be hovered
- The icon fill color is BR 1, BROWN
- The icon stroke color is BE 5, LIGHTEST BEIGE
Focus
A input tag can be focused
- The color used for the focus ring is CB 3, LIGHT BLUE
Click
A input tag can be removed.
When the tag is clicked, the class .animation-fade-out is added, it fades out and should be removed from the DOM.
<button class="if tag input animation-fade-out" type="button">Orwell</button>Status tags
Status tags represent status of item. Status tags use semantic colors to communicate status of item.
Usage
A status tag is a tag that is put by itself in another context, for example to label the status of an invoice etc. You should not wrap it in a list, since it is only natural to have one occurence of this tag.
Do not put status tags in a list
Place a status tag as a standalone element in the context.