TagGroup

A collection of tags for labeling, categorizing, or filtering content.

Usage#

import { TagGroup, Tag } from '@backstage/ui';

<TagGroup>
  <Tag>Tag 1</Tag>
  <Tag>Tag 2</Tag>
</TagGroup>

API reference#

Container for a collection of tags.

Prop	Type	Default	Description
items	Iterable<T>	-	Item objects in the collection.
renderEmptyState	() => ReactNode	-	Content to display when the collection is empty.
selectionMode	nonesinglemultiple	-	The type of selection allowed.
selectedKeys	allIterable<Key>	-	The currently selected keys (controlled).
defaultSelectedKeys	allIterable<Key>	-	The initial selected keys (uncontrolled).
disabledKeys	Iterable<Key>	-	Keys of tags that should be disabled.
onRemove	(keys: Set<Key>) => void	-	Handler called when a tag is removed.
onSelectionChange	(keys: Selection) => void	-	Handler called when the selection changes.
children	ReactNode	-
className	string	-	Additional CSS class name for custom styling.

Inherits all React Aria TagGroup props.

Tag#

Individual tag item within a group.

Prop	Type	Default	Description
id	string	-	Unique identifier for the tag.
textValue	string	-	Text value for accessibility. Derived from children if string.
href	string	-	URL to navigate to when the tag is clicked.
icon	ReactNode	-	Icon displayed before the tag text.
size	smallmedium	small	Visual size of the tag. Use small for inline or dense layouts, medium for standalone tags.
isDisabled	boolean	-	Whether the tag is disabled.
children	ReactNode	-
className	string	-	Additional CSS class name for custom styling.

Inherits all React Aria Tag props.

Examples#

With links#

<TagGroup>
  <Tag href="/items/banana">Banana</Tag>
  <Tag href="/items/apple">Apple</Tag>
  <Tag href="/items/orange">Orange</Tag>
</TagGroup>

With icons#

<TagGroup>
  <Tag icon={<RiBugLine />}>Banana</Tag>
  <Tag icon={<RiAccountCircleLine />}>Apple</Tag>
  <Tag icon={<RiEyeLine />}>Orange</Tag>
  <Tag icon={<RiHeartLine />}>Pear</Tag>
</TagGroup>

Sizes#

<Flex direction="column">
  <TagGroup>
    <Tag size="small" icon={<RiBugLine />}>Banana</Tag>
    <Tag size="small" icon={<RiAccountCircleLine />}>Apple</Tag>
  </TagGroup>
  <TagGroup>
    <Tag size="medium" icon={<RiBugLine />}>Banana</Tag>
    <Tag size="medium" icon={<RiAccountCircleLine />}>Apple</Tag>
  </TagGroup>
</Flex>

Removable#

const list = useListData({
  initialItems: [
    { id: 'banana', name: 'Banana' },
    { id: 'apple', name: 'Apple' },
    { id: 'orange', name: 'Orange' },
  ],
});

<TagGroup
  items={list.items}
  onRemove={keys => list.remove(...keys)}
>
  {item => <Tag>{item.name}</Tag>}
</TagGroup>

Disabled#

<TagGroup>
  <Tag>Banana</Tag>
  <Tag isDisabled>Apple</Tag>
  <Tag isDisabled>Orange</Tag>
  <Tag>Pear</Tag>
</TagGroup>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-TagGroup
bui-TagList
bui-Tag
bui-TagIcon
bui-TagRemoveButton