Toggle

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

import { BookmarkIcon } from "lucide-react"

import { Toggle } from "@/components/cubix/toggle"

export function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
      <BookmarkIcon className="group-aria-pressed/toggle:fill-foreground" />
      Bookmark
    </Toggle>
  )
}

Installation

pnpm dlx cubix@latest add toggle --base radix

Usage

Import

import { Toggle } from "@/components/cubix/toggle"

Example

<Toggle>Toggle</Toggle>

Outline

Use variant="outline" for an outline style.

<div className="flex flex-wrap items-center gap-2">
  <Toggle variant="outline" aria-label="Toggle italic">
    <ItalicIcon />
    Italic
  </Toggle>
  <Toggle variant="outline" aria-label="Toggle bold">
    <BoldIcon />
    Bold
  </Toggle>
</div>

With Text

<Toggle aria-label="Toggle italic">
  <ItalicIcon />
  Italic
</Toggle>

Size

Use the size prop to change the size of the toggle.

<div className="flex flex-wrap items-center gap-2">
  <Toggle variant="outline" aria-label="Toggle small" size="sm">
    Small
  </Toggle>
  <Toggle variant="outline" aria-label="Toggle default" size="default">
    Default
  </Toggle>
  <Toggle variant="outline" aria-label="Toggle large" size="lg">
    Large
  </Toggle>
</div>

Disabled

<div className="flex flex-wrap items-center gap-2">
  <Toggle aria-label="Toggle disabled" disabled>
    Disabled
  </Toggle>
  <Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
    Disabled
  </Toggle>
</div>

RTL

Wrap the toggle in a container with dir="rtl" to mirror direction.

<div dir="rtl">
  <Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
    <BookmarkIcon className="group-aria-pressed/toggle:fill-foreground" />
    Bookmark
  </Toggle>
</div>

API Reference

See also the Base UI Toggle documentation for primitive props.

Toggle

Prop	Type	Default	Description
variant	"default" \| "outline"	"default"	Visual style of the toggle.
size	"default" \| "sm" \| "lg"	"default"	Size of the toggle.
pressed	boolean	-	Controlled pressed state.
defaultPressed	boolean	-	Uncontrolled initial pressed state.
onPressedChange	(pressed: boolean) => void	-	Called when the pressed state changes.
disabled	boolean	false	When true, interaction is disabled.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).