Tag

Tags represent a set of interactive, merchant-supplied keywords that help label, organize, and categorize objects. Tags can be added or removed from an object by merchants.

Examples

Use to signify the attributes of an object.

Drag to resize example

Props

accessibilityLabel
string
A string to use when tag has more than textual content
children
React.ReactNode
Content to display in the tag
disabled
boolean
Disables the tag
url
string
Url to navigate to when tag is clicked or keypressed.
onClick
() => void
Callback when tag is clicked or keypressed. Renders without remove button or url when set.
onRemove
() => void
Callback when remove button is clicked or keypressed.

Accessibility

Labeling

The button to remove a tag is automatically given a label using aria-label so that screen reader users can distinguish which tag will be removed.

Keyboard support

The control to remove a tag is implemented as a button with standard keyboard support.

  • Give buttons keyboard focus with the tab key (or shift + tab when tabbing backwards)
  • To activate a button, press the enter/return or space key

When a merchant uses the button to remove a tag, it is important to make sure that keyboard focus is managed. Moving focus to the next element in the page is recommended.

Default tag

Use to signify the attributes of an object.

Removable tag

Use to allow merchants to remove attributes from an object.

Clickable tag

Use to allow merchants to add attributes to an object.

Tag with link

Use to allow merchants to navigate to a resource. For example a customer segment or a smart collection

Tag with custom content

Use when a tag needs to be visually distinguished from others, like when it's added automatically.

Tag for Android

Accessibility

See Material Design and development documentation about accessibility for Android:

Default tag

Use to signify the attributes of an object.

Removable tag

Use to allow merchants to remove attributes from an object.

Clickable tag

Use to allow merchants to add attributes to an object.

Tag with link

Use to allow merchants to navigate to a resource. For example a customer segment or a smart collection

Tag with custom content

Use when a tag needs to be visually distinguished from others, like when it's added automatically.

Tag for iOS

Accessibility

See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:

Best practices

Tags should:

  • Be presented close to or within the input control that allows merchants to add and remove tags