Toggle

The Toggle component provides a two-state button for toggling states such as bookmarks, pins, or favorites.

Usage

import { Toggle } from "@/components/ui/toggle";

export function ExampleToggle() {
  return (
    <Toggle.Root aria-label="Toggle pin" variant="outline">
      Pin to Top
    </Toggle.Root>
  );
}

Preview

Custom Styling

Apply custom active state colors, hover effects, or rounded shapes via className:

<Toggle.Root className="data-[pressed]:bg-indigo-600 data-[pressed]:text-white hover:bg-indigo-500/10 rounded-full px-4">
  Favorite
</Toggle.Root>

Styling & Class Names

Target internal toggle CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.toggle`	Root button	Two-state toggle button element (`data-[pressed]`).
`toggle--default`	Default variant	Transparent background style.
`toggle--outline`	Outline variant	Bordered container style.

Anatomy

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

<Toggle />;

API Reference

Toggle.Root Props

Prop	Type	Default	Description
`pressed`	`boolean`	`undefined`	Controlled pressed state of the toggle button.
`defaultPressed`	`boolean`	`false`	Initial uncontrolled pressed state.
`onPressedChange`	`(pressed: boolean) => void`	`undefined`	Event handler called when pressed state changes.
`disabled`	`boolean`	`false`	Disables user interaction.
`variant`	`'default' \| 'outline'`	`'default'`	Visual style of the toggle button.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant of the toggle button.