Design Tokens for Mesh have just been released!
Skip to content

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

bash
npm install @nib/tag

Usage

jsx
import Tag from '@nib/tag';

Interactive demo

jsx

Props

PropTypeDefaultDescription
typestringThe 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.
sizestringmediumThe size of the tag. Must be one of small or medium.
invertbooleanInverts the foreground and background colors of the tag when set by the type prop.
backgroundstringThe background color of the tag. See theme colorValues for valid options.
colorstringThe color of the tag text. See theme colorValues for valid options.
childrennodeThe 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.