Tag

A tag is a subtle, compact label used to categorize and organize content.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/tag`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/tag, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`color`
Description	The color theme to apply. This sets both the background and text color.
Type	`"blue" \| "gray" \| "green" \| "lime" \| "magenta" \| "orange" \| "purple" \| "red" \| "teal" \| "yellow"`

`elemBefore`
Description	The component to be rendered before the tag text (e.g., an icon). For avatar/user representations, use `AvatarTag` instead. @see AvatarTag for avatar-based user tags
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`hasMargin`
Description	When false, removes the tag's default margin. Use in contexts like Select multi-value where the parent controls spacing (e.g. gap between tags). Defaults to `true`.
Type	`boolean`

`href`
Description	URI or path. If provided, the tag will be a link.
Type	`string`

`isRemovable`
Description	Flag to indicate if a tag is removable. Defaults to true.
Type	`boolean`

`linkComponent`
Description	A link component to be used instead of our standard link. The styling of our link item will be applied to the link that is passed in.
Type	`ComponentClass<any, any> \| FunctionComponent<any>`

`maxWidth`
Description	Maximum width of the tag. When exceeded, the text will be truncated with ellipsis. Accepts any valid CSS max-width value (e.g., '200px', '15rem', '100%').
Type	`string \| number`

`onAfterRemoveAction`
Description	Handler to be called after tag is removed.
Type	`(text: string) => void`

`onBeforeRemoveAction`
Description	Handler to be called before the tag is removed. If it does not return a truthy value, the tag will not be removed.
Type	`() => boolean`

`onClick`
Description	Handler called when the tag is clicked. Only fires for link tags (when href is provided). The second argument provides an Atlaskit UI analytics event.
Type	`((e: MouseEvent<HTMLAnchorElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void) \| ((e: MouseEvent<HTMLButtonElement, MouseEvent>, analyticsEvent?: UIAnalyticsEvent) => void)`

`removeButtonLabel`
Description	Text rendered as the aria-label for remove button.
Type	`string`

`swatchBefore`
Description	EXPERIMENTAL - Leading color swatch (12×12px), rendered before `elemBefore`. `true`: uses `color.background.accent.<color>.subtle` for swatch color Pass a design token (e.g. `token('color.background.accent.red.subtle')`)
Type	`boolean \| TagSwatchBeforeTokenName`

`swatchBeforeLabel`
Description	Accessible label for the tag's leading color swatch. Paired with `role="img"` to convey the visual meaning of the swatch (e.g. `swatchBeforeLabel="Epic"` for an epic color swatch).
Type	`string`

`swatchBeforeRole`
Description	The WAI-ARIA role applied to the tag's color swatch element. Use when the swatch conveys meaning through color alone (e.g. `role="img"`).
Type	`"status" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog" \| "search" \| "link" \| (string & {}) \| "article" \| "button" \| "figure" \| "form" \| "img" \| "main" \| "menuitem" \| "option" \| ... 52 more ... \| "treeitem"`

`testId`
Description	A `testId` prop is provided for specified elements.
Type	`string`

`text`
Required
Description	Text to be displayed in the tag. Accepts a string or an ordered array of string chunks for migration use cases.
Type	`string \| string[]`

`trailingMetric`
Description	Trailing metric rendered after the tag text. Intended for compact numeric or short status-adjacent values.
Type	`string \| number`

Was this page helpful?

We use this feedback to improve our documentation.