ComponentsTagGroup

TagGroup

A tag group is a list of labels, categories, keywords, filters, or other items, that can be used to group and filter content.

Usage#

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

// Basic usage
<TagGroup aria-label="Tag Group">
  <Tag>Tag 1</Tag>
  <Tag>Tag 2</Tag>
  <Tag>Tag 3</Tag>
</TagGroup>

// With the items prop
const list = [
  { id: '1', name: 'Tag 1' },
  { id: '2', name: 'Tag 2' },
  { id: '3', name: 'Tag 3' },
];

<TagGroup aria-label="Tag Group" items={list}>
  {item => <Tag>{item.name}</Tag>}
</TagGroup>

API reference#

A tag group is a list of tags.

Prop	Type	Default	Responsive
disabledKeys	Iterable<Key>	-	No
selectionMode	nonesinglemultiple	-	No
selectedKeys	allIterable<Key>	-	No
defaultSelectedKeys	allIterable<Key>	-	No
onRemove	(keys: Set<Key>) => void	-	No
onSelectionChange	(keys: Selection) => void	-	No
className	string	-	No
style	CSSProperties	-	No

Tag#

A tag is a single item in a tag group.

Prop	Type	Default	Responsive
id	string	-	No
textValue	string	-	No
isDisabled	boolean	-	No
href	string	-	No
icon	ReactNode	-	No
className	string	-	No
style	CSSProperties	-	No

Examples#

With Links#

A tag can be a link by passing a href prop.

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

<TagGroup aria-label="Tag Group">
  <Tag href="/items/banana">Banana</Tag>
  <Tag href="/items/apple">Apple</Tag>
  <Tag href="/items/orange">Orange</Tag>
  ...
</TagGroup>

With Icons#

A tag can have an icon by passing a icon prop.

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

<TagGroup aria-label="Tag Group">
  <Tag icon={<RiBugLine />}>Banana</Tag>
  <Tag icon={<RiAccountCircleLine />}>Apple</Tag>
  <Tag icon={<RiEyeLine />}>Orange</Tag>
  ...
</TagGroup>

Sizes#

A tag can have a size by passing a size prop. It could be small or medium.

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

<Flex direction="column">
  <TagGroup aria-label="Tag Group">
    <Tag size="small">Banana</Tag>
    <Tag size="small">Apple</Tag>
    <Tag size="small">Orange</Tag>
    ...
  </TagGroup>
  <TagGroup aria-label="Tag Group">
    <Tag size="medium">Banana</Tag>
    <Tag size="medium">Apple</Tag>
    <Tag size="medium">Orange</Tag>
    ...
  </TagGroup>
</Flex>

Removing tags#

A tag can be removed by passing a onRemove prop.

import { TagGroup, Tag } from '@backstage/ui';
import type { Selection } from 'react-aria-components';
import { useListData } from 'react-stately';

const [selected, setSelected] = useState<Selection>(new Set(['travel']));

const list = useListData({
  initialItems: initialList,
});

<TagGroup
  items={list.items}
  onRemove={keys => list.remove(...keys)}
  selectedKeys={selected}
  onSelectionChange={setSelected}
  {...args}
>
  {item => <Tag>{item.name}</Tag>}
</TagGroup>

Disabled#

A switch can be disabled using the isDisabled prop.

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

<TagGroup aria-label="Tag Group">
  <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

Changelog#

0.9.0 - BREAKING: Changed className prop behavior to augment default styles instead of being ignored or overriding them.

Affected components:

Menu, MenuListBox, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBoxItem, MenuSection, MenuSeparator
Switch
Skeleton
FieldLabel
Header, HeaderToolbar
HeaderPage
Tabs, TabList, Tab, TabPanel

If you were passing custom className values to any of these components that relied on the previous behavior, you may need to adjust your styles to account for the default classes now being applied alongside your custom classes. #31496

0.5.0 - New Switch component #30251