Stable

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.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab·Figma, opens in a new tab

Installation

bash

npm install @nib/tag

Usage

jsx

import Tag from '@nib/tag';

Interactive demo

jsx

<Inline space={2}>
  <Tag variation="default">Tag title</Tag>
  <Tag variation="prominent">Tag title</Tag>
  <Tag variation="gentle">Tag title</Tag>
  <Tag variation="muted">Tag title</Tag>
  <Tag variation="brand">Tag title</Tag>
  <Tag variation="success">Tag title</Tag>
  <Tag variation="info">Tag title</Tag>
  <Tag variation="error">Tag title</Tag>
  <Tag variation="warning">Tag title</Tag>
</Inline>

<Inline space={2}>
  <Tag variation="default">Tag title</Tag>
  <Tag variation="prominent">Tag title</Tag>
  <Tag variation="gentle">Tag title</Tag>
  <Tag variation="muted">Tag title</Tag>
  <Tag variation="brand">Tag title</Tag>
  <Tag variation="success">Tag title</Tag>
  <Tag variation="info">Tag title</Tag>
  <Tag variation="error">Tag title</Tag>
  <Tag variation="warning">Tag title</Tag>
</Inline>

Props

Prop	Type	Default	Description
`variation`	string		The variation of the tag which determines the tag colors. Must be one of `default`, `prominent`, `gentle`, `muted`, `brand`, `success`, `info`, `warning` or `error`. This prop will override the `background` and `color` props.
`size`	string	`medium`	The size of the tag. Must be one of `small` or `default`.
`background`	string	`default`	The background color of the tag. See theme `colorValues` for valid options.
`foreground`	string	`default`	The color of the tag text. See theme `colorValues` for valid options.
`children`	node		The children of the tag.

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 size whenever possible. Width of tags varies based on content width. Spacing between tags in a single line should be .5rem or 8px.

Behaviour

We recommend using the variation prop whenever possible, as it provides predefined styles for common use cases. The background and foreground props should only be used when no suitable variation is available. If the variation prop is set, the background and foreground props are ignored.

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.

Edit this page