Tag
The Tag component is used to help users quickly recognise categories in content or allow a user to organise items using keywords. Tags can also be used as a method of filtering data, to show only items within a particular category.
Installation
npm install @nib/tag
Usage
import Tag from '@nib/tag';
Interactive demo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | The type of the tag which determines the tag colors. Must be one of default, brand, success, info, warning, error, white, light, dark. This prop will override the background and color props. white, light and dark are deprecated and do not respond to the invert prop. | |
size | string | medium | The size of the tag. Must be one of small or medium. |
invert | boolean | Inverts the foreground and background colors of the tag when set by the type prop. | |
background | string | The background color of the tag. See theme colorValues for valid options. | |
color | string | The color of the tag text. See theme colorValues for valid options. | |
children | node | The children of the tag. |
Type
The colour system used to style the tags is based on the Alert component colours. When designing with data, we recommend colours map to the tags intention. For example, Red for Error, Green for Success, Yellow for Warning, Blue for Information.
Typography
It’s recommend not to capitalise tags. Labels should use sentence-style capitalisation. Keep labels to one line of concise text.
Size
Tags come in two sizes, small and medium. Try to use the default medium size whenever possible. Width of tags varies based on content width. Spacing between tags in a single line should be .5rem or 8px.
Behaviour
Tags don’t support actions. For example a user cannot click, close or hover over a tag.
If a product team requires iteration with tags, please raise an issue or contact the designops team.
Accessibility
Because tags don’t have interation requirements. They don’t support focus, removal with a delete/backspace key or tab navigation.
Aria-labels should be applied to describe what the list of options are to the user. aria-orientation="horizontal" should be applied to a container of tags to describe the left to right direction of the tags.