Skip to Content
ComponentsToggle

Toggle

A button that stays pressed: bold in a toolbar, a filter chip, a view mode.

Distinct from Switch, which is a form control with an on and an off state and belongs next to a label. A toggle is a button, announces itself with aria-pressed, and lives in a toolbar rather than a form.

Live Examples

Live Example
☀️
Copy
View Code
import { Toggle } from '@jarllyng/nostromo' export default function ToggleExample() { return ( <div className="flex gap-2"> <Toggle aria-label="Bold">B</Toggle> <Toggle aria-label="Italic" defaultPressed>I</Toggle> <Toggle aria-label="Underline" variant="outline">U</Toggle> <Toggle aria-label="Strikethrough" disabled>S</Toggle> </div>...

ToggleGroup

Live Example
☀️
Copy
View Code
import { ToggleGroup, ToggleGroupItem } from '@jarllyng/nostromo' export default function ToggleGroupExample() { const [align, setAlign] = React.useState('left') const [marks, setMarks] = React.useState(['bold']) return ( <div className="space-y-4"> <div>...

Import

import { Toggle, ToggleGroup, ToggleGroupItem } from "@jarllyng/nostromo";

Props

Toggle

PropTypeDefaultDescription
pressedboolean-Controlled state
defaultPressedbooleanfalseUncontrolled initial state
onPressedChange(pressed: boolean) => void-Fired on change
variant"default" | "outline""default"Styling
size"sm" | "default" | "lg""default"Control size
disabledbooleanfalseNot interactive

ToggleGroup

type is required and picks the behaviour: "single" keeps one selected and gives you a string, "multiple" allows several and gives you an array.

variant and size set on the group reach the items through context, so an item still gets the group’s styling when it is wrapped in your own markup. An item can override either one.

An accessible name is worth writing

An icon-only toggle has no text for a screen reader to announce, so give it aria-label. The examples above do it for every one.

Switch for a form field, Checkbox when the answer is part of a form’s data, Button when it does not stay pressed.

Last updated on
SeparatorAspectRatio