Toggle

inputs

A two-state button that can be either on or off.

Preview

Installation

npm install @launchapp/design-system

Import

import { Toggle } from "@launchapp/design-system";

<div className="flex gap-2">  <Toggle aria-label="Toggle italic">Italic</Toggle>  <Toggle aria-label="Toggle bold" defaultPressed>Bold</Toggle></div>

Prop	Type	Default	Description
`pressed`	`boolean`	—	Controlled pressed state.
`defaultPressed`	`boolean`	`false`	Initial pressed state when uncontrolled.
`onPressedChange`	`(pressed: boolean) => void`	—	Callback when pressed state changes.
`variant`	`"default" \| "outline"`	`"default"`	Visual variant.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the toggle.
`disabled`	`boolean`	`false`	Disables the toggle.