ComponentsToggleButtonGroup
Version 0.11.1

ToggleButtonGroup

A grouping container for related ToggleButtons supporting single or multiple selection.

Usage#

import { ToggleButtonGroup, ToggleButton } from '@backstage/ui';

<ToggleButtonGroup selectionMode="single">
  <ToggleButton id="dogs">Dogs</ToggleButton>
  <ToggleButton id="cats">Cats</ToggleButton>
  <ToggleButton id="birds">Birds</ToggleButton>
</ToggleButtonGroup>

API reference#

PropTypeDefaultResponsive
selectionMode
singlemultiple
-No
selectedKeys
Iterable<Key>
-No
defaultSelectedKeys
Iterable<Key>
-No
onSelectionChange
(keys: Selection) => void
-No
size
smallmedium
mediumYes
isDisabled
boolean
falseNo
disabledKeys
Iterable<Key>
-No
children
ReactNode
-No
className
string
-No
style
CSSProperties
-No

Examples#

Surfaces#

Default
On Surface 0
On Surface 1
On Surface 2
On Surface 3
<Flex direction="column" gap="4">
  <Flex direction="column" gap="4">
    <Text>Default</Text>
    <Flex align="center" p="4" gap="4">
      <ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
        <ToggleButton id="option1">Option 1</ToggleButton>
        <ToggleButton id="option2">Option 2</ToggleButton>
        <ToggleButton id="option3">Option 3</ToggleButton>
      </ToggleButtonGroup>
    </Flex>
  </Flex>
  <Flex direction="column" gap="4">
    <Text>On Surface 0</Text>
    <Flex align="center" surface="0" p="4" gap="4">
      <ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
        <ToggleButton id="option1">Option 1</ToggleButton>
        <ToggleButton id="option2">Option 2</ToggleButton>
        <ToggleButton id="option3">Option 3</ToggleButton>
      </ToggleButtonGroup>
    </Flex>
  </Flex>
  <Flex direction="column" gap="4">
    <Text>On Surface 1</Text>
    <Flex align="center" surface="1" p="4" gap="4">
      <ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
        <ToggleButton id="option1">Option 1</ToggleButton>
        <ToggleButton id="option2">Option 2</ToggleButton>
        <ToggleButton id="option3">Option 3</ToggleButton>
      </ToggleButtonGroup>
    </Flex>
  </Flex>
  <Flex direction="column" gap="4">
    <Text>On Surface 2</Text>
    <Flex align="center" surface="2" p="4" gap="4">
      <ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
        <ToggleButton id="option1">Option 1</ToggleButton>
        <ToggleButton id="option2">Option 2</ToggleButton>
        <ToggleButton id="option3">Option 3</ToggleButton>
      </ToggleButtonGroup>
    </Flex>
  </Flex>
  <Flex direction="column" gap="4">
    <Text>On Surface 3</Text>
    <Flex align="center" surface="3" p="4" gap="4">
      <ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
        <ToggleButton id="option1">Option 1</ToggleButton>
        <ToggleButton id="option2">Option 2</ToggleButton>
        <ToggleButton id="option3">Option 3</ToggleButton>
      </ToggleButtonGroup>
    </Flex>
  </Flex>
</Flex>

Single Selection#

<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['dogs']}>
  <ToggleButton id="dogs">Dogs</ToggleButton>
  <ToggleButton id="cat">Cats</ToggleButton>
  <ToggleButton id="bird">Birds</ToggleButton>
</ToggleButtonGroup>

Multiple Selection#

<ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['frontend']}>
  <ToggleButton id="frontend">Frontend</ToggleButton>
  <ToggleButton id="backend">Backend</ToggleButton>
  <ToggleButton id="platform">Platform</ToggleButton>
</ToggleButtonGroup>

Icons and Text#

import { RiCloudLine, RiStarFill, RiStarLine, RiArrowRightSLine } from '@remixicon/react';

<ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['cloud']}>
  <ToggleButton id="cloud" aria-label="Cloud" iconStart={<RiCloudLine />} />
  <ToggleButton
    id="starred"
    aria-label="Starred"
    iconStart={<RiStarFill />}
  />
  <ToggleButton id="star" iconStart={<RiStarLine />}>
    Star
  </ToggleButton>
  <ToggleButton id="next" iconEnd={<RiArrowRightSLine />}>
    Next
  </ToggleButton>
</ToggleButtonGroup>

Icons Only#

import { RiCloudLine, RiStarLine, RiArrowRightSLine } from '@remixicon/react';

<ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['cloud']}>
  <ToggleButton id="cloud" iconStart={<RiCloudLine />} />
  <ToggleButton id="star" iconStart={<RiStarLine />} />
  <ToggleButton id="next" iconEnd={<RiArrowRightSLine />} />
</ToggleButtonGroup>

Disallow Empty Selection#

<ToggleButtonGroup selectionMode="single" disallowEmptySelection defaultSelectedKeys={['one']}>
  <ToggleButton id="one">One</ToggleButton>
  <ToggleButton id="two">Two</ToggleButton>
  <ToggleButton id="three">Three</ToggleButton>
</ToggleButtonGroup>

Vertical Orientation#

<ToggleButtonGroup selectionMode="single" orientation="vertical">
  <ToggleButton id="morning">Morning</ToggleButton>
  <ToggleButton id="afternoon">Afternoon</ToggleButton>
  <ToggleButton id="evening">Evening</ToggleButton>
</ToggleButtonGroup>

Disabled#

<ToggleButtonGroup selectionMode="single" isDisabled>
  <ToggleButton id="cat">Cat</ToggleButton>
  <ToggleButton id="dog">Dog</ToggleButton>
  <ToggleButton id="bird">Bird</ToggleButton>
</ToggleButtonGroup>

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-ToggleButtonGroup
  • bui-ToggleButtonGroup[data-orientation="horizontal"]
  • bui-ToggleButtonGroup[data-orientation="vertical"]

Changelog#