Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/ui-resolver.
• Live playground: /components/base-ui/toggle.

When to use it

Use Toggle for a single independent state that can be pressed on or off. It works well for filter chips, toolbar controls, view-affecting options, and compact actions like save or favorite.

If the visitor is choosing between coordinated options, use ToggleGroup instead so the selection model stays explicit.

Composition notes

Toggle is a single control, but icon-only usage still needs a clear aria-label. When the root element needs to be something other than a button, asChild lets you keep the recipe while swapping the semantic wrapper.

Prefer putting icons or short text inside the toggle. If the content gets long, another control style is usually easier to scan.

Behavior and theming guidance

Use variant="plain" for low-emphasis toolbars and variant="outlined" when the control needs more visible structure. Match size to the surrounding density instead of mixing many toggle sizes in the same group.

The pressed styling already comes from the shared recipe, so use tokens and variants before rewriting colors or spacing by hand.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/ui-resolver.
• Playground route: /sandbox?component=Toggle.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes