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.

Use to signify the attributes of an object.

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

function TagExample() {
  return (


Want to help make this feature better? Please share your feedback.

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



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.