Toggle

import { Bookmark } from "lucide-react"

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

When to use it#

Reach for a toggle when a single control flips something on or off in place: saving an item, muting a microphone, turning on bold text. The change happens as soon as it is pressed.

If the choice is part of a form that gets submitted later, a checkbox or a switch usually reads better. If you need several related toggles in a row, see Toggle Group.

Import#

Copyimport { Toggle } from "@hel/ui/toggle"

Examples#

Editor controls#

A toggle with only an icon becomes a square button. Give it an aria-label, since there is no text for a screen reader to read.

import { Bold, Italic, Underline } from "lucide-react"

import { Flex } from "@hel/ui/flex"

An icon that changes#

pressedIcon replaces the leading icon while the toggle is on, which is handy for pairs like a muted and an unmuted bell. For the same icon filled in, like a heart, keep one icon and fill it with a class.

import { Bell, BellOff, Heart } from "lucide-react"

import { Flex } from "@hel/ui/flex"

Controlled#

Pass pressed and onPressedChange when something else needs to know the state. Here the label next to the toggle follows it.

import * as React from "react"
import { Mic, MicOff } from "lucide-react"

Looks and sizes#

A toggle is ghost by default, with no border until it is pressed. Switch to variant="outline" when it sits on its own and should read as a button before anyone touches it. There are two sizes, sm and md, and sm is the default.

A disabled toggle keeps its pressed or unpressed look, dimmed, and ignores the pointer.

Props#

Toggle also takes every prop of the Base UI toggle, and inside a group it takes its variant and size from the group unless you set them on the toggle itself.