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.

Tag component examples

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

import {Card, Tag} from '@shopify/polaris';
import React from 'react';

function TagExample() {
  return (
    <Card>
      <Tag url="#">Wholesale</Tag>
    </Card>
  );
}

Props

This component defines its props in a way that our website can't automatically parse. The type definition is shown below, but it might be hard to read.

type TagProps

& ( | {onClick?(): void; onRemove?: undefined; url?: undefined} | {onClick?: undefined; onRemove?(): void; url?: string} )

Best practices

Tags should:

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

To show the status of an object, use the badge component
To add and remove tags, use the text field component

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.

Tag