Toggle

A two-state button that can be toggled on or off, commonly used for text formatting controls like bold, italic, and underline.

Preview

Default

Outline Variant

Usage

tsx

import { Toggle } from "zostel-ui";

<Toggle aria-label="Toggle bold">
  <Bold className="h-4 w-4" />
</Toggle>

<Toggle aria-label="Toggle italic" defaultPressed>
  <Italic className="h-4 w-4" />
</Toggle>

Props

Prop	Type	Default	Description
`pressed`	`boolean`	—	The controlled pressed state of the toggle.
`defaultPressed`	`boolean`	false	Whether the toggle is pressed by default.
`onPressedChange`	`(pressed: boolean) => void`	—	Callback fired when the pressed state changes.
`variant`	`"default" \| "outline"`	"default"	Visual style variant of the toggle.
`size`	`"default" \| "sm" \| "lg"`	"default"	Size of the toggle button.
`disabled`	`boolean`	false	When true, prevents the user from interacting.

pressed

Type: boolean

Default: —

The controlled pressed state of the toggle.

defaultPressed

Type: boolean

Default: false

Whether the toggle is pressed by default.

onPressedChange

Type: (pressed: boolean) => void

Default: —

Callback fired when the pressed state changes.

variant

Type: "default" | "outline"

Default: "default"

Visual style variant of the toggle.

size

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

Default: "default"

Size of the toggle button.

disabled

Type: boolean

Default: false

When true, prevents the user from interacting.

Previous Pagination Next Toggle Group