Navigation Toggle

Toggle

Press on, press off — a filter, a favourite (Radix Toggle).

Preview

Default

Outline, with icons

Usage

tsx

import { Toggle, HeartIcon } from "zostel-ui";

<Toggle aria-label="Only places with Wi-Fi">Wi-Fi</Toggle>
<Toggle variant="outline" aria-label="Save"><HeartIcon size={16} /></Toggle>

Props

Prop	Type	Default	Description
`pressed / defaultPressed`	`boolean`	—	Controlled / uncontrolled.
`onPressedChange`	`(pressed: boolean) => void`	—	Called when it flips.
`variant`	`"default" \| "outline"`	`"default"`	Look.
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Size.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

pressed / defaultPressed

Type: boolean

Default: —

Controlled / uncontrolled.

onPressedChange

Type: (pressed: boolean) => void

Default: —

Called when it flips.

variant

Type: "default" | "outline"

Default: "default"

Look.

size

Type: "default" | "sm" | "lg"

Default: "default"

Size.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).