ComponentsToggleButton

ToggleButton

A button that toggles between selected and unselected states. Can be used as a single toggle or as part of a ToggleButtonGroup.

Usage#

import { ToggleButton } from '@backstage/ui';
import { useState } from 'react';

const [isSelected, setIsSelected] = useState(false);

<ToggleButton isSelected={isSelected} onChange={setIsSelected}>
  Toggle
</ToggleButton>

API reference#

Prop	Type	Default	Responsive
isSelected	boolean	-	No
onChange	(isSelected: boolean) => void	-	No
size	smallmedium	medium	Yes
icon	ReactNode	-	No
isDisabled	boolean	false	No
children	ReactNode	-	No
className	string	-	No
style	CSSProperties	-	No

Examples#

With Icon#

const [isSelected, setIsSelected] = useState(false);

<ToggleButton
  isSelected={isSelected}
  onChange={setIsSelected}
  icon={<RiCheckLine />}
>
  With Icon
</ToggleButton>

Sizes#

<Flex align="center" gap="2">
  <ToggleButton size="small" isSelected={small} onChange={setSmall}>
    Small
  </ToggleButton>
  <ToggleButton size="medium" isSelected={medium} onChange={setMedium}>
    Medium
  </ToggleButton>
</Flex>

Disabled#

<Flex gap="2">
  <ToggleButton isDisabled isSelected={false} onChange={() => {}}>
    Disabled Off
  </ToggleButton>
  <ToggleButton isDisabled isSelected={true} onChange={() => {}}>
    Disabled On
  </ToggleButton>
</Flex>

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-ToggleButton
bui-ToggleButton[data-size="small"]
bui-ToggleButton[data-size="medium"]
bui-ToggleButtonContent