Toggle

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

export default function ToggleHero() {
  return (
    <Toggle aria-label="Toggle bold">
      <BoldIcon />
    </Toggle>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/toggle.json"

Usage

import { Toggle } from '@/registry/ui/toggle';

<Toggle aria-label="Toggle bold">
  <BoldIcon />
</Toggle>;

Examples

Variant

The variant prop controls the visual style of the toggle.

export function ToggleSoft() {
  return (
    <Toggle aria-label="Toggle bold">
      <BoldIcon />
    </Toggle>
  );
}

API Reference

PropTypeDefault
variant"soft" | "outline" | "solid""soft"

All other props are forwarded to the underlying Base UI Toggle primitive.