Components

Toggle

A two-state button that is on or off

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

A button that holds a pressed state. Reach for it when one control switches one thing on and off in place, without a form value. No Nyte styling here.

Usage

Style the pressed state from the data-pressed attribute.
pressed with onPressedChange controls the state. defaultPressed leaves it uncontrolled.
Give it value when it sits inside a Toggle group. The group reads that string.
Rendering something other than a <button> needs nativeButton={false}.

Examples

Uncontrolled

<Toggle defaultPressed aria-label="Bold">
  <IconBold size={14} />
</Toggle>

Controlled

const [pressed, setPressed] = useState(false);

<Toggle pressed={pressed} onPressedChange={setPressed} aria-label="Bold">
  B
</Toggle>;

Props

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

Toggle

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.
An icon-only toggle needs aria-label. The label names the control, not the current state.
disabled sets data-disabled and stops interaction.
The focus ring is yours to draw. See Focus.