Toggle React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Toggle is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import Toggle from @/components/ui/toggle.

import { Check, Heart } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"

export function ListingActions({ saved, onSavedChange }: { saved: boolean; onSavedChange: (saved: boolean) => void }) {
  return (
    <div className="flex items-center gap-2">
      <Toggle variant="outline" radius="full" pressedIcon={<Check />}>
        Delivery only
      </Toggle>
      <Toggle
        size="icon"
        radius="full"
        tone="danger"
        pressed={saved}
        onPressedChange={onSavedChange}
        pressedIcon={<Heart className="fill-current" />}
        aria-label="Save to favorites"
      >
        <Heart />
      </Toggle>
    </div>
  )
}

Props

• childrendefault "Delivery only"
  ReactNode

  The label. For icon sizes pass the icon itself plus an aria-label, and keep the label the same in both states and name what pressed means (Bold, Mute notifications): aria-pressed already says whether it is on.

• variantdefault "ghost"
  "ghost" | "outline" | "soft"

  ghost is transparent with muted text and takes the selected tint when pressed (toolbars). outline adds a hairline border that turns to the tone when pressed (filter chips). soft rests on a light fill and becomes the solid tone fill when pressed, so the on state is loud.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Color of the pressed state. neutral is the gray selected tint (black or white fill on soft); the other tones tint the pressed state and color its text.

• colordefault ""
  string

  Any CSS color for the pressed state. Replaces the tone; on soft the text on the fill turns black or white by lightness. Leave empty to use the tone.

• sizedefault "md"
  "sm" | "md" | "lg" | "icon-sm" | "icon" | "icon-lg"

  The button's size table: 32 / 40 / 48px tall with matching padding, type and icon size. The icon sizes are square and need an aria-label. On touch screens md grows to 44px and sm keeps its look with a 44px hit area.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape, scaled with the size (md is 8 / 10 / 12px). full makes a pill, the usual look for filters.

• defaultPresseddefault false
  boolean

  Starting state while uncontrolled.

• pressed
  boolean

  Controlled state. Pair it with onPressedChange; without a handler the toggle stays where you put it.

• onPressedChange
  (pressed: boolean) => void

  Called with the next state on click, Space, Enter or the shortcut.

• disableddefault false
  boolean

  Dims the toggle, blocks clicks and the shortcut, and keeps its current state.

• fullWidthdefault false
  boolean

  Stretches to the container width, e.g. a Follow toggle at the bottom of a phone screen.

• shortcutdefault ""
  string

  A key combo in mod+k notation ("mod+b", "shift+mod+x"; mod is ⌘ on Apple devices and Ctrl elsewhere) that flips the toggle from anywhere on the page. Also sets aria-keyshortcuts. Bare keys are ignored while typing. Pass it only while the toggle should listen, e.g. while its editor has focus.

• asChilddefault false
  boolean

  Renders your single child (a router link for URL filters, your own button) with the toggle's look, state, press and icons. A child that is not a button gets role="button" and flips on Space too, so aria-pressed is announced. The demo turns the first filter into an <a>. As in Radix, calling event.preventDefault() in your onClick cancels the flip.

• leftIcon
  ReactNode

  An icon before the label. Unsized svgs follow the size (14 / 16 / 18px).

• pressedIcon
  ReactNode

  Replaces leftIcon (or the icon child in icon sizes) while pressed, popping in on a spring: an outline heart to a filled one, Bell to BellOff. On a text toggle without leftIcon it only shows while pressed and the width springs open, like a filter chip growing a check, with the neighbors gliding along.

• classNames
  Partial<Record<"icon" | "label", string>>

  Extra classes for the inner parts: the icon wrapper and the label wrapper.

• className
  string

  Extra classes for the toggle itself, merged last. Style the pressed state with data-[state=on]:, e.g. data-[state=on]:bg-background/90.

FAQ

Used in

More React button components