Home

Toggle

A button that stays down: a quiet pill that fills while on, for one on or off choice made in place.

ui.togglecomponents/ui/toggle.tsx

Use case

For the AI

Use it for one switch that changes what is shown and is flipped often, right where the content is: Unread Only above a list of messages, Assigned to Me over the orders table, bold in a note's toolbar, a heart to mark a client as a favourite. It is a view or tool state, not a saved setting.

Use it when

  • A filter on the list on screen (Unread Only)
  • A single formatting switch (bold)
  • Marking something as a favourite in place

Use something else when

  • Several related switches side by side (bold, italic, underline): Toggle group
  • Exactly one of several options must be chosen: Segmented control
  • A saved setting that is on or off (email reminders): Switch
  • An action that happens once when pressed: Button

Examples

Default: a quiet pill that fills while on
Outline

Code

Import

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

Usage

const [unreadOnly, setUnreadOnly] = useState(false)

<Toggle variant="outline" pressed={unreadOnly} onPressedChange={setUnreadOnly}>
  Unread Only
</Toggle>

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

Rules

  • An icon-only Toggle carries aria-label.
  • The label stays the same whether on or off; the fill says it is on.
  • Use pressed with onPressedChange when the state lives in your code, defaultPressed when it does not.
  • variant is default (a fill while on) or outline; size is sm, default or lg.
  • Labels in Title Case.