//
A two-state button that can be either on or off.
bun add xiod-ui1import { Toggle } from "xiod-ui/toggle";1<Toggle>2</Toggle>| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean| undefined | - | Whether the toggle button is currently pressed. This is the controlled counterpart of `defaultPressed`. |
defaultPressed | boolean| undefined | false | Whether the toggle button is currently pressed. This is the uncontrolled counterpart of `pressed`. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
onPressedChange | ((pressed: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element| undefined; }) => void)| undefined | - | Callback fired when the pressed state is changed. |
value | string| undefined | - | A unique string that identifies the toggle when used inside a toggle group. |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: ToggleState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, ToggleState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: ToggleState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
size | "default"| "sm"| "lg"| null| undefined | default | |
variant | "default"| "outline"| null| undefined | default |