Components

Toggle

A button that holds a pressed state

Import

import { Toggle } from "@nyte-ai/ui/toggle";

Use it to switch one thing on and off without a form value.

Usage

iconOnly requires aria-label, which also becomes the native title.
Without iconOnly, pass children as the label.

Examples

const [pinned, setPinned] = useState(true);

<Toggle iconOnly icon="pin" aria-label="Pin" pressed={pinned} onPressedChange={setPinned} />
<Toggle icon="eye" defaultPressed>
  Preview
</Toggle>

Props

Takes every Base UI Toggle prop. className and style take plain values, not functions of state.

Prop	Type	Default	Description
`indicator`	`"fill" \| "glyph"`	`"fill"`	`"glyph"` drops the pressed fill.
`size`	`"2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	See Button.
`iconOnly`	`boolean`	`false`
`icon`	`IconName`
`tone`	`"neutral" \| "primary" \| "success" \| "warning" \| "danger"`	`"neutral"`
`xstyle`	`ButtonLayout`		Placement and width only.
`className`, `style`	see Theming

The reference table below comes from Base UI, MIT, © Material-UI SAS.

A two-state button that can be on or off. Renders a <button> element.

Toggle Props:

Prop	Type	Default	Description
value	`string`	-	A unique string that identifies the toggle when used inside a toggle group.
defaultPressed	`boolean`	`false`	Whether the toggle button is currently pressed. This is the uncontrolled counterpart of `pressed`.
pressed	`boolean`	-	Whether the toggle button is currently pressed. This is the controlled counterpart of `defaultPressed`.
onPressedChange	`((pressed: boolean, eventDetails: Toggle.ChangeEventDetails) => void)`	-	Callback fired when the pressed state is changed.
nativeButton	`boolean`	`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>`).
disabled	`boolean`	`false`	Whether the component should ignore user interaction.
className	`string \| ((state: Toggle.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Toggle.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Toggle.State) => ReactElement)`	-	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.

Toggle Data Attributes:

Attribute	Type	Description
data-pressed	-	Present when the toggle button is pressed.
data-disabled	-	Present when the toggle button is disabled.

Accessibility

Renders a native <button> with aria-pressed. Enter and Space flip it.
The aria-label names the control, not the current state.
Keyboard focus shows the focus ring.