Skip to main content

Tag

Tag in Storybook

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​

The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.1 AA requirements. Non-textual content that needs to convey meaning (such as icons and keyboard focus visibility) has a contrast ratio of at least 3:1 with its adjacent colors. All content is visible and functional up to and including 400% without requiring scrolling in two dimensions.

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance.

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.

Changelog​

10.9.0​

icon property type extended​

The type of the icon property has been extended to string | React.ComponentType.

icon default value changed​

The default value for the icon property was changed from 'gw-close', to CloseIcon.

Deprecations​

Passing a string as a value to the icon property has been deprecated.