component

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

TagGroup

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-Switch
bui-SwitchIndicator

Changelog

0.5.0 - New Switch component #30251