Skip to main content
The @zendeskgarden/react-tags package provides the Tag component with subcomponents for avatars and close buttons. Tags are compact labels used to categorize content, show attributes, or let users remove applied filters.

​
Installation

npm install @zendeskgarden/react-tags

# Peer dependencies
npm install react react-dom styled-components @zendeskgarden/react-theming

​
Tag

Wrap your app in ThemeProvider before using any Garden component. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Tag } from '@zendeskgarden/react-tags';

const App = () => (
  <ThemeProvider>
    <Tag>Support</Tag>
  </ThemeProvider>
);

​
Size

The size prop adjusts font size and padding. The default is medium. 
<Tag size="small">Small</Tag>
<Tag size="medium">Medium</Tag>
<Tag size="large">Large</Tag>

​
Color (hue)

Use the hue prop to apply a color to the tag. You can pass a primary hue name, a theme color token, or any hex value. 
<Tag hue="blue">Blue</Tag>
<Tag hue="green">Green</Tag>
<Tag hue="grey">Grey</Tag>
<Tag hue="kale">Kale</Tag>
<Tag hue="red">Red</Tag>
<Tag hue="yellow">Yellow</Tag>
Named hues (blue, green, grey, kale, red, yellow) and theme tokens (primaryHue, successHue, etc.) automatically adapt to light and dark mode. Raw hex values do not adapt.

​
Pill style

Set isPill to apply fully rounded corners. This is commonly used alongside Tag.Avatar. 
<Tag isPill>
  <Tag.Avatar>
    <img alt="" src="/images/user.png" />
  </Tag.Avatar>
  Jane Doe
</Tag>

​
Round style

Set isRound to render a symmetrical, circular tag. Best used for single characters or numbers. 
<Tag isRound>3</Tag>

​
Regular font weight

By default, tag text is bold. Set isRegular to use normal font weight. 
<Tag isRegular>Label</Tag>

​
Tag.Avatar

Nest Tag.Avatar as the first child of Tag to display a small image or icon inside the tag. Pair it with isPill for the best visual result. 
<Tag isPill>
  <Tag.Avatar>
    <img alt="" src="/images/avatars/user.png" />
  </Tag.Avatar>
  Jane Doe
</Tag>

​
Tag.Close

Add Tag.Close as the last child of Tag to show a remove button. Provide an aria-label describing what will be removed. When the tag contains a close button, make the tag itself focusable by setting tabIndex={0}. 
<Tag tabIndex={0}>
  Support
  <Tag.Close
    aria-label="press delete to remove Support tag"
    onClick={() => handleRemove('Support')}
  />
</Tag>
Tag.Close sets tabIndex={-1} by default so that keyboard focus stays on the tag element, not the button. Users activate the close action from the tag’s keydown handler.

​
Full example

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Tag } from '@zendeskgarden/react-tags';

const FilterTag = ({ label, onRemove }: { label: string; onRemove: () => void }) => (
  <Tag hue="blue" tabIndex={0}>
    {label}
    <Tag.Close
      aria-label={`press delete to remove ${label} tag`}
      onClick={onRemove}
    />
  </Tag>
);

const App = () => (
  <ThemeProvider>
    <FilterTag label="Urgent" onRemove={() => console.log('removed')} />

    <Tag isPill hue="green">
      <Tag.Avatar>
        <img alt="" src="/images/user.png" />
      </Tag.Avatar>
      Jane Doe
      <Tag.Close aria-label="press delete to remove Jane Doe tag" onClick={() => {}} />
    </Tag>
  </ThemeProvider>
);

​
Props

​
Tag

​
size
'small' | 'medium' | 'large'
default:"'medium'"
Adjusts font size and padding.
​
hue
string
Sets the tag color. Accepts primary hues (blue, green, grey, kale, red, yellow), theme tokens (primaryHue, successHue, neutralHue, chromeHue, dangerHue, warningHue), or any hex value.
​
isPill
boolean
Applies fully rounded (pill) styling.
​
isRound
boolean
Applies circular styling. Best for single characters or numbers.
​
isRegular
boolean
Applies regular (non-bold) font weight.

​
Tag.Close

​
aria-label
string
Accessible label for the close button. Should describe the item being removed.
​
onClick
(event: React.MouseEvent) => void
Called when the close button is clicked.

Build docs developers (and LLMs) love

Get started for freeTalk to us