Inputs

Toggle

A button that stays pressed, for turning a view option or a format on and off.

npx prodular-ui add toggle

Default and outline

import { BoldIcon, ItalicIcon, PinIcon, UnderlineIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export default function ToggleDefault() {  return (    <div className="flex flex-wrap items-center justify-center gap-6">      <div className="flex items-center gap-1">        <Toggle aria-label="Bold" defaultPressed>          <BoldIcon />        </Toggle>        <Toggle aria-label="Italic">          <ItalicIcon />        </Toggle>        <Toggle aria-label="Underline">          <UnderlineIcon />        </Toggle>      </div>      <Toggle variant="outline" defaultPressed>        <PinIcon data-icon="inline-start" />        Pinned      </Toggle>    </div>  )}

Sizes

import { StarIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export default function ToggleSizes() {  return (    <div className="flex flex-wrap items-center justify-center gap-3">      {(["sm", "default", "lg"] as const).map((size) => (        <Toggle key={size} size={size} variant="outline" aria-label="Star dashboard">          <StarIcon data-icon="inline-start" />          Starred        </Toggle>      ))}    </div>  )}

Anatomy

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

Guidance

Use it when

Editor formatting (bold, italic) and view options (pin, star) that are either on or off.

Avoid

Saved settings. Use Switch.
Choosing one of several views. Use ToggleGroup.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

Icon-only toggles need aria-label naming the action (Bold), not the state.
Use defaultPressed or pressed with onPressedChange. Do not swap the variant to show state.
Mark icons with data-icon when there is a text label.
Use size="xs" on Toggle for dense toolbars and inspectors instead of overriding its height.

API

Toggle

Prop	Type	Default	Description
variant	"default" \| "outline"	"default"	Ghost or bordered.
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Height. Matches Button.
pressed / defaultPressed	boolean		Controlled or initial state.
onPressedChange	(pressed: boolean) => void		Called when toggled.