TagGroup

Usage#

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

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

API reference#

TagGroup#

A tag group is a list of tags.

Tag#

A tag is a single item in a tag group.

Examples#

With Links#

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

<TagGroup>
  <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.

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

Sizes#

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

<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>

Removing tags#

A tag can be removed by passing a onRemove prop.

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#

A switch can be disabled using the isDisabled prop.

<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

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