Tag

Tag in Storybook

Examples

Check out the Usage section for details about how to design a tag properly, and the different configuration options we provide.

Basic example

A basic tag is a string with special formatting that designates it as a tag to a reader.

<Tag label="This is a tag"/>

Collapsed text example

There is a character limit on tags. If the text is too long it will be cut off.

<Tag label="This is a tag with a very very very very very very long label"/>

Clickable tag example

You can designate an onClick function for a tag. This function is called when the icon next to the tag text is clicked by a user.

<Tag label="This is a tag" onClick={MakeToast}/>

Clickable tag with custom icon example

You can designate an icon that a user can click to run a function. Note that if there is no onClick prop added, the custom icon will not be shown.

<Tag label="This is a tag" icon={CheckIcon} onClick={MakeToast}/

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 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

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.

Code

<Tag label="This is a tag"/>

Import statement

import { Tag } from '@jutro/components';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

className

Type

string

Description

CSS class name for this component.

disabled

Type

bool

Description

If set to true, the tag is rendered as disabled.

icon

Type

string | Icon

Description

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

Default value

CloseIcon

iconAriaLabel

Type

IntlMessageShape

Description

The aria-label value for the tag's icon button, overrides the default one with "delete" or "expand" message.

iconClassName

Type

string

Description

Custom class name for the icon.

iconWrapperClassName

Type

string

Description

Custom class name for the icon wrapper.

label

Type

IntlMessageShape

Description

The label for the tag.

labelClassName

Type

string

Description

Custom class name for the label.

onClick

Type

() => void

Description

Callback for icon button click, If not provided, the button isn't rendered.

ariaLabeldeprecated

Type

IntlMessageShape

Description

The aria-label for the tag icon button, overrides the default one with "delete" text. Deprecated: since v10.1.0 Use the iconAriaLabel prop instead.

iddeprecated

Type

string

Description

Unique identifier for the component. Deprecated: since v10.1.0.

renderIcondeprecated

Type

(iconComponent: ReactNode) => ReactNode

Description

A render prop for adding a custom wrapper for the icon button Deprecated: since 10.9.0, use the icon prop instead.

Hooks

No hooks are available for tag.

Translation keys

There is one translation key associated with the tag component:

Key	Used for
jutro-components.widgets.Tag.close	aria-label value for the tag icon button

Escape hatches

For more information, see our documentation about escape hatches.

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.