Headless

Toggle

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

In Nyte

Import

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

@nyte-ai/ui/toggle re-exports the Base UI namespace unchanged. There is no Nyte styling on this subpath; the consumer owns every class, StyleX style, and layout decision. Base UI owns the interaction model, keyboard handling, focus management, and ARIA below.

Consumed by:

desktop/src/renderer/src/chrome/sidebar.tsx
desktop/src/renderer/src/chrome/usage-settings.tsx
desktop/src/renderer/src/components/ui.tsx

The rest of this page is Base UI's documentation for @base-ui/react/toggle, reproduced verbatim under the MIT license, © Material-UI SAS. Component paths in examples refer to the Base UI package; in Nyte, import from the subpath above.

Anatomy

Import the component and use it as a single part:

Anatomy

import { Toggle } from '@base-ui/react/toggle';

<Toggle />;

API reference

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.

Toggle.Props

Re-export of Toggle props.

Toggle.State

type ToggleState = {
  /** Whether the toggle is currently pressed. */
  pressed: boolean;
  /** Whether the toggle should ignore user interaction. */
  disabled: boolean;
};

Toggle.ChangeEventReason

type ToggleChangeEventReason = 'none';

Toggle.ChangeEventDetails

type ToggleChangeEventDetails = {
  /** The reason for the event. */
  reason: 'none';
  /** The native event associated with the custom event. */
  event: Event;
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
};

Canonical Types

Maps Canonical: Alias — Use Canonical when its namespace is already imported; otherwise use Alias.

Toggle.State: ToggleState
Toggle.Props: ToggleProps
Toggle.ChangeEventReason: ToggleChangeEventReason
Toggle.ChangeEventDetails: ToggleChangeEventDetails