Version 0.12.0

ToggleButton

A button that toggles between selected and unselected states.

Usage#

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

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

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

API reference#

PropTypeDefaultDescription
isSelected
boolean
-Whether the button is selected. Controls the visual pressed state.
defaultSelected
boolean
-The default selected state (uncontrolled).
onChange
(isSelected: boolean) => void
-Handler called when the button is pressed.
size
smallmedium
smallVisual weight. Use small for compact layouts, medium for emphasis.
iconStart
ReactElement
-Icon displayed before the button text. Sized to match button.
iconEnd
ReactElement
-Icon displayed after the button text. Sized to match button.
isDisabled
boolean
falsePrevents interaction and dims the button.
onSurface
Surface
-Surface the button is placed on. Defaults to context surface.
children
ReactNode(renderProps) => ReactNode
-Button label. Can be a function for dynamic content.
className
string
-Additional CSS class name for custom styling.

Inherits all React Aria ToggleButton props.

Examples#

With icon#

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

<ToggleButton
  isSelected={isSelected}
  onChange={setIsSelected}
  iconStart={<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-ToggleButtonContent

Changelog#