Components

Toggle

A binary press-in-out control. For an on/off setting attached to a label, prefer Switch. For multiple exclusive options, prefer Toggle group.

When to usefor a single icon-shaped state that flips on and off — pin, star, mute, lock — usually inside a toolbar.

Import

import { Toggle } from "@ravnhq/efni/toggle"

Variants

<Toggle aria-label="Pin"><Icon icon={Pin} /></Toggle>
<Toggle variant="outline" aria-label="Star"><Icon icon={Star} /></Toggle>

Sizes

<Toggle size="sm" | "default" | "lg" />

With label

<Toggle variant="outline">
  <Icon icon={Bell} />
  Notifications
</Toggle>

<Toggle variant="outline" defaultPressed>
  <Icon icon={Volume2} />
  Sound on
</Toggle>

Accessibility

Key	Action
`Enter / Space`	Toggle the pressed state.
`Tab`	Move focus to and from the toggle.

Always give icon-only toggles an aria-label.
Base UI uses `pressed` / `defaultPressed` (not Radix's `on`); the DOM attr is aria-pressed.

Props

Prop	Type	Default	Description
`variant`	`"default" \| "outline"`	`"default"`	Visual style.
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Height and padding.
`pressed`	`boolean`	—	Whether the toggle button is currently pressed. This is the controlled counterpart of `defaultPressed`.
`defaultPressed`	`boolean`	`false`	Whether the toggle button is currently pressed. This is the uncontrolled counterpart of `pressed`.
`onPressedChange`	`((pressed: boolean, eventDetails: Toggle.ChangeEventDetails) => void)`	—	Callback fired when the pressed state is changed.
`…props`	`TogglePrimitive.Props`	—	Everything Toggle passes to the element it renders.