Toggle

Toggles are a two-state button that can either be off (not pressed) or on (pressed).

'use client';
import * as React from 'react';
import { Toggle } from '@base-ui-components/react/toggle';
import classes from './styles.module.css';

export default function ToggleIntroduction() {
  const [pressed, setPressed] = React.useState(false);
  return (
    <Toggle
      pressed={pressed}
      onPressedChange={setPressed}
      className={classes.button}
      aria-label="Bookmark this article"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        className={classes.icon}
      >
        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
      </svg>
    </Toggle>
  );
}

Installation

Base UI components are all available as a single package.

npm install @base-ui-components/react

Once you have the package installed, import the component.

import { Toggle } from '@base-ui-components/react/toggle';

Anatomy

Toggle is a single component that renders a <button>:

<Toggle>Toggle bookmark</Toggle>

Controlled

Use the pressed and onPressedChange props to control the pressed state:

const [pressed, setPressed] = React.useState(false);

<Toggle pressed={pressed} onPressedChange={setPressed}>
  {/* children */}
</Toggle>;

Uncontrolled

Use the defaultPressed prop to set the initial pressed state of the component when uncontrolled:

<Toggle defaultPressed={false}>{/* children */}</Toggle>

Accessibility

Toggles must be given an accessible name with aria-label or aria-labelledby. It is important that the label does not change based on the pressed state to ensure a smooth screen-reader experience, since announcing the pressed state is already handled by aria-pressed.

Styling

Use the [data-pressed] attribute to apply styles based on the pressed state:

<Toggle className="MyToggle">{/* children */}</Toggle>

/* base state, not pressed */
.MyToggle {
  background: white;
  color: black;
}

/* pressed state */
.MyToggle[data-pressed] {
  background: black;
  color: white;
}