# Toggle (/cloud/headless/toggle)



{/* Generated by scripts/sync-base-ui-reference.mjs. Edit the script, not this file. */}

## In Nyte [#in-nyte]

```ts title="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 [#anatomy]

Import the component and use it as a single part:

```jsx title="Anatomy"
import { Toggle } from '@base-ui/react/toggle';

<Toggle />;
```

## API reference [#api-reference]

### Toggle [#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&#xA;inside a toggle group.                                                                                                               |
| defaultPressed  | `boolean`                                                                            | `false` | Whether the toggle button is currently pressed.&#xA;This is the uncontrolled counterpart of `pressed`.                                                                                        |
| pressed         | `boolean`                                                                            | -       | Whether the toggle button is currently pressed.&#xA;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&#xA;via the `render` prop.&#xA;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&#xA;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&#xA;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&#xA;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 [#toggleprops]

Re-export of [Toggle](#toggle) props.

### Toggle.State [#togglestate]

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

### Toggle.ChangeEventReason [#togglechangeeventreason]

```typescript
type ToggleChangeEventReason = 'none';
```

### Toggle.ChangeEventDetails [#togglechangeeventdetails]

```typescript
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 [#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`