Skip to main content

Tag

Tag in Storybook

Usage​

Overview​

A tag is used to label and categorize items with descriptive keywords. Items can have single tags or a tag collection.

Tags are useful for quick recognition, easy navigation, and filtering items.

Anatomy​

Tags formatting

Tags consist of:

  1. Label: text that identifies the tag. Tags should always have labels. They can be search terms or keywords.
  2. Close icon: the icon that users can click to remove the tag.
  3. Tag collection: a group of more than one tags. When an item has more than one tag, it becomes a tag collection.

Best practices​

  • When content is mapped to multiple categories, use tags to differentiate between them.
  • Labels should be short for easy scanning, preferably one word.
  • Use tags to filter data and show items within a particular category.

Behaviors​

States​

Tags have enabled, disabled, hover, focus, and active states:

  • Enabled: Communicates to the user that the element is enabled for interaction (default). Enabled tags have a background color with HEX # F0F3F6.
  • Disabled: Communicates to the user that the element is not interactive. Disabled tags have a background color with HEX # F9FAFB.
  • Hover: Provides feedback indicating that the user has placed a cursor over the element. (desktop only). On hover, the background color of tags is HEX # E1E6EC.
  • Focus: Provides feedback indicating that the user has highlighted the element, typically using an input method such as a keyboard or mouse. On focus, the background color of tags is HEX # F0F3F6, and the tag is surrounded by a stroke with HEX # A5D7EC.
  • Active: Provides feedback indicating that the user is clicking or tapping the element. Active tabs have a background color with HEX # D1D9E2.

Interactions​

Tags formatting

Keyboard​

The close button is activated by Spacebar and Enter keys.

Screen reader​

When active, the close ('X') button within each tag includes the WAI-ARIA attribute: aria-label="close"

Accessibility​

This component has been validated to meet the WCAG 2.2 AA accessibility guidelines in its default, base configuration. This includes ensuring:

  • The contrast ratio of textual elements against their background is above 4.5:1.
  • Non-textual content that needs to convey meaning (like icons and focus indicators) has a contrast ratio of at least 3:1 with its adjacent colors.
  • The item is operable using a keyboard, as well as using a mouse.
  • Content is accessible using screen readers, such as JAWS and VoiceOver.

Accessibility conformance ultimately depends on how this component is implemented and customized. Changes made by the content author can affect accessibility. For details on our shared responsibility model, please review our full Jutro accessibility statement.

When using the tag component within your application:

  1. Be sure the tag text is clear and concise.
  2. Do not use color alone to differentiate tag categories.
  3. When using custom colors ensure that the minimum contrast requirements are met.