Skip to content

ToggleButton

ToggleButton is an interactive component used to toggle a setting on or off.

Figma logo
  • The root DOM node is a <button>, so the native <button> props will be forwarded to the native element.
  • Don't use ToggleButtons for:
React props
NameTypeDefaultDescription
children  ReactNodeThe content of the component
closeButtonHidden  boolHides the close action in the pressed state
pressed  booleanfalseSets the visual appearance to a pressed button as well as aria-pressed
  • We have added aria-pressed to indicate when a toggle is true or false.

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

render(<ToggleButton pressed>On</ToggleButton>);
const toggleButton = screen.getByRole('button', {
name: 'On',
});
expect(toggleButton).toHaveAttribute('aria-pressed', 'true');