Toggle

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

Usage

import { Toggle } from "@lemonsqueezy/wedges";
<Toggle>Toggle</Toggle>

API Reference

Along with inheriting all props from the Radix Toggle primitive, this component also supports all Button component props, except for the variant prop, which is limited to outline and transparent options.

PropValueDefault
after
ReactElement<HTMLElement>
/
asChild
boolean
false
before
ReactElement<HTMLElement>
/
defaultPressed
boolean
/
destructive
boolean
false
disabled
boolean
false
isIconOnly
boolean
false
onPressedChange
function
/
pressed
boolean
/
shape
"rounded" | "pill"
"rounded"
size
"xs-icon" | "sm" | "md"
"md"
variant
"outline" | "transparent"
"transparent"
Data attributeValue
[data-disabled]
Present when disabled
[data-state]
"on" | "off"

Accessibility

The Toggle component supports all accessibility features of the Radix Toggle primitive.

Edit this page