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

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
When Not to Use
  • As a replacement for the Badge, as the Badge is a singular element that gives context to a specific subject.

Standalone

Default standalone Tag

New

Disabled

Disabled standalone Tag

New

Error

Standalone Tag in an error state

New

Max width

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

The quick brown fox jumps over the lazy dog