Toggle

Two-state button built on Base UI Toggle.

import { PinIcon } from 'lucide-react'
import { Toggle } from '@/components/ui/toggle'

export function ToggleDemo() {
  return (
    <Toggle variant="outline" size="sm">
      <PinIcon data-icon="inline-start" className="group-data-pressed/toggle:fill-current" />
      Pin case
    </Toggle>
  )
}

Installation

pnpm dlx shadcn@latest add https://rdf.dev.360online.com/r/toggle.json

Installs to @/components/ui/toggle.

Manual installation

Install the dependencies:

pnpm add @base-ui/react@^1.8.0 class-variance-authority@^0.7.1

Copy the source into your project:

components/ui/toggle.tsx

'use client'

import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const toggleVariants = cva(
	"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-accent aria-pressed:text-accent-foreground data-pressed:bg-accent data-pressed:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
			},
			size: {
				default: 'h-10 min-w-10 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5',
				sm: "h-8 min-w-8 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
				lg: 'h-12 min-w-12 px-4 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
)

function Toggle({
	className,
	variant = 'default',
	size = 'default',
	...props
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
	return <TogglePrimitive data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
}

export { Toggle, toggleVariants }

A two-state button that can be either on or off. Built on the Base UI Toggle primitive with customizable variants and sizes.

Features

Two-state toggle functionality (pressed/unpressed)
Built on the Base UI Toggle primitive for accessibility
Two visual variants: default and outline
Three sizes: sm, default, lg
Icon spacing via data-icon="inline-start" / data-icon="inline-end"; SVGs are sized automatically
Controlled (pressed) and uncontrolled (defaultPressed) modes
Disabled state and aria-invalid styling
toggleVariants exported for reuse (also used by ToggleGroup)

Usage

import { Toggle } from "@/components/ui/toggle"
import { Bold } from "lucide-react"

// Icon only
<Toggle aria-label="Toggle bold">
  <Bold />
</Toggle>

// With text
<Toggle aria-label="Toggle bold">Bold</Toggle>

// With icon and text
<Toggle aria-label="Toggle bold">
  <Bold data-icon="inline-start" />
  Bold
</Toggle>

// Initially pressed (uncontrolled)
<Toggle defaultPressed aria-label="Toggle bold">
  <Bold />
</Toggle>

// Controlled toggle
const [isPressed, setIsPressed] = useState(false)

<Toggle pressed={isPressed} onPressedChange={setIsPressed} aria-label="Toggle bold">
  <Bold />
</Toggle>

// Variant and size
<Toggle variant="outline" size="lg" aria-label="Toggle bold">
  <Bold />
</Toggle>

Examples

Default

An outline toggle with an icon and text. The pin icon is filled while the toggle is on, using the group/toggle state.

import { PinIcon } from 'lucide-react'
import { Toggle } from '@/components/ui/toggle'

export function ToggleDemo() {
  return (
    <Toggle variant="outline" size="sm">
      <PinIcon data-icon="inline-start" className="group-data-pressed/toggle:fill-current" />
      Pin case
    </Toggle>
  )
}

Variants

default is transparent until pressed; outline adds a border so the toggle reads as a control on busy backgrounds.

import { BoldIcon } from 'lucide-react'
import { Toggle } from '@/components/ui/toggle'

export function ToggleVariants() {
  return (
    <div className="grid grid-cols-[auto_auto_auto] items-center gap-x-4 gap-y-3 text-sm">
      <span />
      <span className="text-xs text-muted-foreground">Off</span>
      <span className="text-xs text-muted-foreground">On</span>
      <span className="font-medium">Default</span>
      <Toggle aria-label="Bold (default variant, off)">
        <BoldIcon />
      </Toggle>
      <Toggle defaultPressed aria-label="Bold (default variant, on)">
        <BoldIcon />
      </Toggle>
      <span className="font-medium">Outline</span>
      <Toggle variant="outline" aria-label="Bold (outline variant, off)">
        <BoldIcon />
      </Toggle>
      <Toggle variant="outline" defaultPressed aria-label="Bold (outline variant, on)">
        <BoldIcon />
      </Toggle>
    </div>
  )
}

Sizes

Three sizes: sm, default and lg.

import { BellIcon } from 'lucide-react'
import { Toggle } from '@/components/ui/toggle'

export function ToggleSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Toggle size="sm" variant="outline">
        <BellIcon data-icon="inline-start" />
        Small
      </Toggle>
      <Toggle variant="outline">
        <BellIcon data-icon="inline-start" />
        Default
      </Toggle>
      <Toggle size="lg" variant="outline">
        <BellIcon data-icon="inline-start" />
        Large
      </Toggle>
    </div>
  )
}

With Text

Small outline toggles with icons and counts, used as map layer filters for municipal facilities.

import { BookOpenIcon, DumbbellIcon, RecycleIcon, TreesIcon } from 'lucide-react'
import { Toggle } from '@/components/ui/toggle'

export function ToggleWithText() {
  const layers = [
    { id: 'libraries', label: 'Libraries', icon: BookOpenIcon, count: 6, on: true },
    { id: 'sports', label: 'Sports halls', icon: DumbbellIcon, count: 11, on: true },
    { id: 'recycling', label: 'Recycling centres', icon: RecycleIcon, count: 3, on: false },
    { id: 'parks', label: 'Parks', icon: TreesIcon, count: 24, on: false },
  ]
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <p className="text-sm font-medium">Show on map</p>
      <div className="flex flex-wrap gap-2">
        {layers.map(({ id, label, icon: Icon, count, on }) => (
          <Toggle key={id} size="sm" variant="outline" defaultPressed={on}>
            <Icon data-icon="inline-start" />
            {label}
            <span className="text-muted-foreground tabular-nums">{count}</span>
          </Toggle>
        ))}
      </div>
    </div>
  )
}

Independent toggles in an editor toolbar for a decision letter. The preview text follows the pressed state.

import { BoldIcon, ItalicIcon, ListIcon, ListOrderedIcon, UnderlineIcon } from 'lucide-react'
import { useState } from 'react'
import { Separator } from '@/components/ui/separator'
import { Toggle } from '@/components/ui/toggle'

export function ToggleFormattingToolbar() {
  const [formatting, setFormatting] = useState<string[]>(['bold'])
  const isOn = (format: string) => formatting.includes(format)
  const toggleFormat = (format: string) =>
    setFormatting((prev) => (prev.includes(format) ? prev.filter((f) => f !== format) : [...prev, format]))

  return (
    <div className="w-full max-w-md overflow-hidden rounded-lg border">
      <div className="flex items-center gap-1 border-b bg-muted/50 p-1" role="toolbar" aria-label="Formatting">
        <Toggle size="sm" pressed={isOn('bold')} onPressedChange={() => toggleFormat('bold')} aria-label="Bold">
          <BoldIcon />
        </Toggle>
        <Toggle size="sm" pressed={isOn('italic')} onPressedChange={() => toggleFormat('italic')} aria-label="Italic">
          <ItalicIcon />
        </Toggle>
        <Toggle
          size="sm"
          pressed={isOn('underline')}
          onPressedChange={() => toggleFormat('underline')}
          aria-label="Underline"
        >
          <UnderlineIcon />
        </Toggle>
        <Separator orientation="vertical" className="mx-1 h-4" />
        <Toggle size="sm" aria-label="Bulleted list">
          <ListIcon />
        </Toggle>
        <Toggle size="sm" aria-label="Numbered list">
          <ListOrderedIcon />
        </Toggle>
      </div>
      <p
        className={[
          'p-3 text-sm',
          isOn('bold') ? 'font-semibold' : '',
          isOn('italic') ? 'italic' : '',
          isOn('underline') ? 'underline underline-offset-4' : '',
        ].join(' ')}
      >
        The Environment and Building Committee grants the building permit for Storgatan 14, subject to the conditions
        below.
      </p>
    </div>
  )
}

Follow Case

A toggle per row to follow public cases. The icon and label change with the state; aria-pressed tells screen readers whether it's on.

import { BellIcon, BellRingIcon } from 'lucide-react'
import { useState } from 'react'
import { Badge } from '@/components/ui/badge'
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemTitle,
} from '@/components/ui/item'
import { Toggle } from '@/components/ui/toggle'

export function ToggleFollowCase() {
  const [followed, setFollowed] = useState<string[]>(['2026-04812'])
  const cases = [
    { id: '2026-04812', title: 'New sports hall in Ekdalen', meta: 'Procurement · Tender closes 30 April' },
    { id: '2026-03377', title: 'Detailed plan for Norrby centre', meta: 'Consultation until 15 May' },
    { id: '2026-02951', title: 'Speed limit on Kungsgatan', meta: 'Decision expected in June' },
  ]
  return (
    <ItemGroup className="w-full max-w-md gap-2">
      {cases.map((item) => {
        const on = followed.includes(item.id)
        return (
          <Item key={item.id} variant="outline" size="sm">
            <ItemContent>
              <ItemTitle>
                {item.title}
                <Badge variant="outline" className="font-mono">
                  {item.id}
                </Badge>
              </ItemTitle>
              <ItemDescription>{item.meta}</ItemDescription>
            </ItemContent>
            <ItemActions>
              <Toggle
                size="sm"
                variant="outline"
                pressed={on}
                onPressedChange={(pressed) =>
                  setFollowed((prev) => (pressed ? [...prev, item.id] : prev.filter((id) => id !== item.id)))
                }
              >
                {on ? <BellRingIcon data-icon="inline-start" /> : <BellIcon data-icon="inline-start" />}
                {on ? 'Following' : 'Follow'}
                <span className="sr-only">{item.title}</span>
              </Toggle>
            </ItemActions>
          </Item>
        )
      })}
    </ItemGroup>
  )
}

Disabled

Disabled toggles in both states and variants.

import { BellRingIcon, BoldIcon, ItalicIcon, PinIcon } from 'lucide-react'
import { Toggle } from '@/components/ui/toggle'

export function ToggleDisabled() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Toggle disabled aria-label="Bold">
        <BoldIcon />
      </Toggle>
      <Toggle disabled defaultPressed aria-label="Italic">
        <ItalicIcon />
      </Toggle>
      <Toggle disabled variant="outline" size="sm">
        <PinIcon data-icon="inline-start" />
        Pin case
      </Toggle>
      <Toggle disabled variant="outline" size="sm" defaultPressed>
        <BellRingIcon data-icon="inline-start" />
        Following
      </Toggle>
    </div>
  )
}

Controlled

A controlled toggle (pressed / onPressedChange) that filters a case list to overdue cases.

import { useState } from 'react'
import { Badge } from '@/components/ui/badge'
import { Toggle } from '@/components/ui/toggle'

export function ToggleControlled() {
  const [overdueOnly, setOverdueOnly] = useState(false)
  const cases = [
    { id: '2026-04812', name: 'Anna Lindqvist', due: 'Overdue 3 days', overdue: true },
    { id: '2026-04790', name: 'Omar Haddad', due: 'Due 22 April', overdue: false },
    { id: '2026-04755', name: 'Ingrid Hansen', due: 'Overdue 1 day', overdue: true },
    { id: '2026-04701', name: 'Mikko Virtanen', due: 'Due 2 May', overdue: false },
  ]
  const visible = overdueOnly ? cases.filter((c) => c.overdue) : cases
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex items-center justify-between gap-2">
        <p className="text-sm text-muted-foreground">
          {visible.length} of {cases.length} cases
        </p>
        <Toggle size="sm" variant="outline" pressed={overdueOnly} onPressedChange={setOverdueOnly}>
          Overdue only
        </Toggle>
      </div>
      <ul className="divide-y rounded-lg border text-sm">
        {visible.map((c) => (
          <li key={c.id} className="flex items-center justify-between gap-4 px-3 py-2">
            <div>
              <p className="font-medium">{c.name}</p>
              <p className="font-mono text-xs text-muted-foreground">{c.id}</p>
            </div>
            <Badge variant={c.overdue ? 'destructive' : 'secondary'}>{c.due}</Badge>
          </li>
        ))}
      </ul>
    </div>
  )
}

Props

Toggle

variant?: "default" | "outline" - The visual style variant (default "default")
size?: "sm" | "default" | "lg" - The size of the toggle (default "default")
pressed?: boolean - The pressed state of the toggle (controlled)
defaultPressed?: boolean - The default pressed state (uncontrolled)
onPressedChange?: (pressed: boolean, eventDetails) => void - Callback when pressed state changes
disabled?: boolean - Whether the toggle is disabled
className?: string - Additional CSS classes
Extends all Base UI Toggle props

Styling

The pressed state is styled with data-pressed / aria-pressed (accent background). Override it with className:

<Toggle className="data-pressed:bg-primary data-pressed:text-primary-foreground" aria-label="Toggle bold">
  <Bold />
</Toggle>

Accessibility

Built on the Base UI Toggle primitive with full keyboard support
Renders a button with aria-pressed reflecting the state
Space / Enter toggle the pressed state
Always provide an aria-label for icon-only toggles

Best Practices

Labeling
- Always provide meaningful aria-label attributes
- Consider tooltips for icon-only toggles
- Ensure labels describe the action, not the current state
State Management
- Use controlled mode when the state lives elsewhere
- Use ToggleGroup for sets of related options
Visual Design
- Use consistent sizing within a toolbar
- Use outline when toggles sit on a busy background

Common Use Cases

Text Formatting: Bold, italic, underline toggles in editors
Layout Controls: Text alignment, view modes, display options
Filter Controls: Show/hide content categories
Media Controls: Mute/unmute, shuffle/repeat

Integration Examples

With React Hook Form

import { useForm, Controller } from 'react-hook-form'
import { Toggle } from '@/components/ui/toggle'

function SettingsForm() {
  const { control, handleSubmit } = useForm()

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="notifications"
        control={control}
        render={({ field }) => (
          <Toggle
            pressed={field.value}
            onPressedChange={field.onChange}
            aria-label="Enable notifications"
          >
            Enable Notifications
          </Toggle>
        )}
      />
    </form>
  )
}

Toggle Group
Button
Checkbox
Switch
Radio Group
Tabs

Toggle

Installation

Features

Usage

Examples

Default

Variants

Sizes

With Text

Formatting Toolbar

Follow Case

Disabled

Controlled

Props

Toggle

Styling

Accessibility

Best Practices

Common Use Cases

Integration Examples

With React Hook Form

Related Components