Toggle Button

A two-state button that can be either on or off.

Features

Full keyboard navigation.
Can be controlled or uncontrolled.

Installation

Install the component from your command line.

npm install @radix-ui/react-toggle-button

npm install @radix-ui/react-toggle-button

Anatomy

Import the component.

import * as ToggleButton from '@radix-ui/react-toggle-buton';

export default () => <ToggleButton.Root />;

import * as ToggleButton from '@radix-ui/react-toggle-buton';
export default () => <ToggleButton.Root />;

Basic example

Create your styled toggle button component from the primitive parts.

// import { styled } from 'path-to/stitches.config';
import * as ToggleButton from '@radix-ui/react-toggle-button';

const StyledToggleButton = styled(ToggleButton.Root, {
  appearance: 'none',
  backgroundColor: 'transparent',
  border: 'none',
  padding: '5px 10px',
  boxShadow: 'inset 0 0 0 1px gainsboro',
  overflow: 'hidden',
  borderRadius: 3,

  '&:focus': {
    outline: 'none',
    boxShadow: 'inset 0 0 0 1px dodgerblue, 0 0 0 1px dodgerblue',
  },

  '&[data-state=on]': {
    backgroundColor: 'gainsboro',
  },
});

export default () => <StyledToggleButton>Toggle</StyledToggleButton>;

// import { styled } from 'path-to/stitches.config';
import * as ToggleButton from '@radix-ui/react-toggle-button';
const StyledToggleButton = styled(ToggleButton.Root, {
  appearance: 'none',
  backgroundColor: 'transparent',
  border: 'none',
  padding: '5px 10px',
  boxShadow: 'inset 0 0 0 1px gainsboro',
  overflow: 'hidden',
  borderRadius: 3,
  '&:focus': {
    outline: 'none',
    boxShadow: 'inset 0 0 0 1px dodgerblue, 0 0 0 1px dodgerblue',
  },
  '&[data-state=on]': {
    backgroundColor: 'gainsboro',
  },
});
export default () => <StyledToggleButton>Toggle</StyledToggleButton>;

API Reference

Root

The toggle button.

Prop	Type	Default
`as`	`enum`	`button`
`defaultToggled`	`boolean`
`toggled`	`boolean`
`onToggledChange`	`function`
`disabled`	`boolean`

Accessibility

Keyboard Interactions

Key	Description
`Space`	Activates/deactivates the toggle button.
`Enter`	Activates/deactivates the toggle button.