Tag

Tags are objects that hold text and have a delete icon to remove them. They can appear within TextFields, TextAreas, ComboBox or as standalone components.

also known as Chip, Pill, Filter Tag

Figma:

Partially ready

Web:

iOS:

Android:

A11y:

Props

Component props
Name	Type	Default
`text` Required	`string`	-
	Short text to render inside the tag.
`disabled`	`boolean`	`false`
	Set a disabled state so the tag looks inactive and cannot be interacted with.
`errorMessage`	`string`	-
	Set an error state on the tag. The message is used as an accessibility label for the error icon. Keep it short so it doesn't overwhelm the user.
`onRemove`	`({\| event: SyntheticMouseEvent<> \|}) => void`	-
	Callback fired when the tag is removed. Should handle state updates to stop rendering the component. Required unless the tag is in a disabled state.
`removeIconAccessibilityLabel`	`string`	-
	Accessibility label for the icon button to remove the tag, ideally something like "Remove [Tag Name] Tag". Required unless the tag is in a disabled state.

Usage guidelines

When to use

In conjunction with TextField, TextArea, and ComboBox, or as a standalone element to display selected options.

When not to use

As a replacement for the Badge, as the Badge is a singular element that gives context to a specific subject.

Accessibility

Ready

Variants

Standalone

Default standalone Tag

function Example(props) {
  const [showTag, setShowTag] = React.useState(true);
  return showTag ? (
    <Tag
      onRemove={() => setShowTag(false)}
      removeIconAccessibilityLabel="Remove New tag"
      text="New"
    />
  ) : null;
}

function Example(props) {
  const [showTag, setShowTag] = React.useState(true);
  return showTag ? (
    <Tag
      onRemove={() => setShowTag(false)}
      removeIconAccessibilityLabel="Remove New tag"
      text="New"
    />
  ) : null;
}

Disabled

Disabled standalone Tag

<Tag disabled text="New" />

<Tag disabled text="New" />

Error

Standalone Tag in an error state

function Example(props) {
  const [showTag, setShowTag] = React.useState(true);
  return showTag ? (
    <Tag
      errorMessage="Error"
      onRemove={() => setShowTag(false)}
      removeIconAccessibilityLabel="Remove New tag"
      text="New"
    />
  ) : null;
}

function Example(props) {
  const [showTag, setShowTag] = React.useState(true);
  return showTag ? (
    <Tag
      errorMessage="Error"
      onRemove={() => setShowTag(false)}
      removeIconAccessibilityLabel="Remove New tag"
      text="New"
    />
  ) : null;
}

Max width

Tags have a max width of 300px, and will clip longer text

function Example(props) {
  const [showTag, setShowTag] = React.useState(true);
  return showTag ? (
    <Tag
      onRemove={() => setShowTag(false)}
      removeIconAccessibilityLabel="Remove long example tag"
      text="The quick brown fox jumps over the lazy dog"
    />
  ) : null;
}

function Example(props) {
  const [showTag, setShowTag] = React.useState(true);
  return showTag ? (
    <Tag
      onRemove={() => setShowTag(false)}
      removeIconAccessibilityLabel="Remove long example tag"
      text="The quick brown fox jumps over the lazy dog"
    />
  ) : null;
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library	Partially ready	Component is live in Figma, however may not be available for all platforms.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub

; Opens a new tab