Toggle

A button that stays on or off, with a fill that settles in when pressed, a clear hover-to-on step and icons that can fill with the state.

Used in Pro blocks: Artifact and Code Block

import { IconBold, IconItalic, IconUnderline } from "@tabler/icons-react"

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

export function ToggleDemo() {
  return (
    <div className="flex items-center gap-1">
      <Toggle aria-label="Bold" defaultPressed>
        <IconBold />
      </Toggle>
      <Toggle aria-label="Italic">
        <IconItalic />
      </Toggle>
      <Toggle aria-label="Underline">
        <IconUnderline />
      </Toggle>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/toggle.json

Adds the component, the HextaUI theme tokens and any HextaUI components it depends on.

Add the theme tokens to your global CSS, if you haven’t yet.

Install the dependencies.

pnpm add @base-ui/react class-variance-authority cn

3
Copy and paste the following code into your project.
components/ui/toggle.tsx
"use client" import * as React from "react" import { Toggle as TogglePrimitive } from "@base-ui/react/toggle" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "cn" type ClassName<State> =
Update the import paths to match your project setup.

Usage

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

<Toggle aria-label="Bold">
  <IconBold />
</Toggle>

Hovering an off toggle shows a light tint; turning it on settles a stronger fill into place and brings the label to full contrast, so on never looks like hover.

Examples

Outline

Open example

variant="outline" adds a border and a surface, for toggles that sit on their own.

import { IconBookmark } from "@tabler/icons-react"

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

export function ToggleOutline() {
  return (
    <div className="flex items-center gap-2">
      <Toggle variant="outline" aria-label="Bookmark">
        <IconBookmark />
      </Toggle>
      <Toggle variant="outline">
        <IconBookmark />
        Bookmark
      </Toggle>
    </div>
  )
}

With text

Open example

Icons and labels sit side by side. Toggles with visible text don't need an aria-label.

import { IconItalic, IconTextWrap } from "@tabler/icons-react"

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

export function ToggleText() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle>
        <IconItalic />
        Italic
      </Toggle>
      <Toggle variant="outline" defaultPressed>
        <IconTextWrap />
        Wrap lines
      </Toggle>
      <Toggle variant="outline">Show hidden files</Toggle>
    </div>
  )
}

Filled when on

Open example

Add group-data-pressed/toggle:fill-current to an outline icon and it fills in as the toggle turns on.

import { IconBookmark, IconHeart, IconStar } from "@tabler/icons-react"

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

export function ToggleFilledIcon() {
  return (
    <div className="flex items-center gap-1">
      <Toggle aria-label="Like" defaultPressed>
        <IconHeart className="group-data-pressed/toggle:fill-current" />
      </Toggle>
      <Toggle aria-label="Star">
        <IconStar className="group-data-pressed/toggle:fill-current" />
      </Toggle>
      <Toggle aria-label="Save">
        <IconBookmark className="group-data-pressed/toggle:fill-current" />
      </Toggle>
    </div>
  )
}

Sizes

Open example

sm, default and lg. Icon-only toggles stay square.

import { IconBold } from "@tabler/icons-react"

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

export function ToggleSizes() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Toggle size="sm" aria-label="Bold, small">
          <IconBold />
        </Toggle>
        <Toggle aria-label="Bold">
          <IconBold />
        </Toggle>
        <Toggle size="lg" aria-label="Bold, large">
          <IconBold />
        </Toggle>
      </div>
      <div className="flex items-center gap-2">
        <Toggle size="sm" variant="outline">
          Small
        </Toggle>
        <Toggle variant="outline">Default</Toggle>
        <Toggle size="lg" variant="outline">
          Large
        </Toggle>
      </div>
    </div>
  )
}

Pill

Open example

shape="pill" rounds the ends fully, for toggles inside rounded surfaces like a chat composer.

import { IconSparkles, IconWorld } from "@tabler/icons-react"

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

export function TogglePill() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle shape="pill" defaultPressed>
        <IconSparkles />
        Think
      </Toggle>
      <Toggle shape="pill" variant="outline">
        <IconWorld />
        Search
      </Toggle>
    </div>
  )
}

Disabled

Open example

A disabled toggle keeps showing whether it's on, but can't be pressed or focused.

import { IconBold, IconUnderline } from "@tabler/icons-react"

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

export function ToggleDisabled() {
  return (
    <div className="flex items-center gap-2">
      <Toggle disabled aria-label="Bold">
        <IconBold />
      </Toggle>
      <Toggle disabled defaultPressed aria-label="Underline">
        <IconUnderline />
      </Toggle>
      <Toggle disabled variant="outline">
        Read-only mode
      </Toggle>
    </div>
  )
}

Controlled

Open example

Pass pressed and onPressedChange. The label stays the same while the icon follows the state.

"use client"

import * as React from "react"
import { IconMicrophone, IconMicrophoneOff } from "@tabler/icons-react"

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

export function ToggleControlled() {
  const [muted, setMuted] = React.useState(false)

  return (
    <div className="flex items-center gap-3 text-sm">
      <Toggle
        variant="outline"
        aria-label="Mute microphone"
        pressed={muted}
        onPressedChange={setMuted}
      >
        {muted ? <IconMicrophoneOff /> : <IconMicrophone />}
      </Toggle>
      <span className="text-muted-foreground">
        Microphone is {muted ? "muted" : "on"}
      </span>
    </div>
  )
}

Right to left

Open example

Icons lead the label from the right.

import { IconAlignRight, IconBold, IconItalic } from "@tabler/icons-react"

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

export function ToggleRtl() {
  return (
    <div dir="rtl" className="flex items-center gap-2">
      <Toggle variant="outline" defaultPressed>
        <IconBold />
        عريض
      </Toggle>
      <Toggle variant="outline">
        <IconItalic />
        مائل
      </Toggle>
      <Toggle variant="outline" aria-label="محاذاة لليمين">
        <IconAlignRight />
      </Toggle>
    </div>
  )
}

Keyboard

Key	Action
`SpaceEnter`	Turns the focused toggle on or off.
`Tab`	Moves focus to the next toggle.

Accessibility

The toggle is a button with aria-pressed, so screen readers announce whether it's on.
Give icon-only toggles an aria-label that names the action ("Mute microphone") and keep it the same in both states. Changing it as well as the pressed state reads as a double negative.
On touch screens the hit area grows to at least 44px, except inside a toggle group where neighbours would overlap.
With reduced motion, nothing scales; the fill only fades.

API reference

Toggle

Prop	Type	Default
`variant`	`"default" \| "outline"`	`"default"`
`size`	`"default" \| "sm" \| "lg"`	`"default"`
`shape`	`"default" \| "pill"`	`"default"`
`pressed`	`boolean`	`–`
`defaultPressed`	`boolean`	`false`
`onPressedChange`	`(pressed, details) => void`	`–`
`disabled`	`boolean`	`false`
`value`Identifies the toggle inside a toggle group.	`string`	`–`
`className`	`string \| (state) => string`	`–`
`nativeButton`	`boolean`	`true`
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

Attribute	Description
`data-slot="toggle"`	The button, with data-variant and data-size.
`data-pressed`	Present when the toggle is on.
`data-disabled`	Present when the toggle is disabled.

Used in Pro blocks

Blocks that build on Toggle.

Every block comes with HextaUI Pro, and Prompt Input is free.