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.
npm install @nib/tag
import Tag from '@nib/tag';
|string||The type of the tag which determines the tag colour. Must be one of |
|string||The size of the tag. Must be one of |
|string||The background color of the tag. See theme |
|string||The color of the tag text. See theme |
|node||The children of the tag.|
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.
It’s recommend not to capitalise tags. Labels should use sentence-style capitalisation. Keep labels to one line of concise text.
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
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.
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.