Tag

Installation

npm install @nib-group/mesh-tag

Usage

import Tag from '@nib-group/mesh-tag';

Interactive demo

<Stack space={2}>
  <Inline space={2}>
    <Tag variation="success">Tag</Tag>
    <Tag variation="error">Tag</Tag>
    <Tag variation="warning">Tag</Tag>
    <Tag variation="info">Tag</Tag>
    <Tag variation="brand">Tag</Tag>
    <Tag variation="default">Tag</Tag>
    <Tag variation="prominent">Tag</Tag>
    <Tag variation="gentle">Tag</Tag>
    <Tag variation="muted">Tag</Tag>
  </Inline>
  {/* Mode based equivalents */}
  <Inline space={2}>
    <Tag sentiment="positive" prominence="prominent">
      Tag
    </Tag>
    <Tag sentiment="negative" prominence="prominent">
      Tag
    </Tag>
    <Tag sentiment="cautionary" prominence="prominent">
      Tag
    </Tag>
    <Tag sentiment="informative" prominence="prominent">
      Tag
    </Tag>
    <Tag sentiment="hero">Tag</Tag>
    <Tag sentiment="default">Tag</Tag>
    <Tag sentiment="default" prominence="prominent">
      Tag
    </Tag>
    <Tag sentiment="default" prominence="gentle">
      Tag
    </Tag>
    <Tag sentiment="default" prominence="muted">
      Tag
    </Tag>
    {/* Extras */}
    <Tag sentiment="sage">Tag</Tag>
    <Tag sentiment="warm">Tag</Tag>
    <Tag sentiment="sunset">Tag</Tag>
  </Inline>
</Stack>

Props

Color

There are a few ways to set the color of a tag. The simplest way is to use the variation prop, which provides predefined styles for common use cases. If the variation prop is set, sentiment and prominence props will be ignored!

When you need finer control over the tag colors, you can instead set the sentiment and prominence props. For example you may want to increase the prominence of a tag with a negative sentiment to make it more eye-catching:

<Inline space={2}>
  <Tag variation="error">Error variation</Tag>
  <Tag sentiment="negative" prominence="prominent">
    Negative/prominent sentiment
  </Tag>
</Inline>

Note the difference in naming between variation and sentiment/prominence. The variation prop uses more descriptive names to indicate the use case of the tag, whereas the sentiment and prominence props use the underlying theme values for sentiment and prominence.

Finally, you can also set the foreground prop to adjust the tag text color. For example you may want a neutral tag background with a brand foreground to add emphasis to the tag text:

<Tag sentiment="default" prominence="gentle" foreground="brand">
  Default/gentle bg with brand fg
</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.

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.