Toggle

Displays an 8-bit toggle component. The toggle can be used to trigger an action or to toggle between two states.

8-bit toggle component with outline variant

Open in

Installation

pnpm dlx shadcn@canary add https://8bitcn.com/r/8bit-toggle.json

Usage

// Basic outline toggle
<Toggle variant="outline">
  <Bold className="size-4" />
</Toggle>

// With text
<Toggle variant="outline">
  <Italic className="size-4" />
  <span>Italic</span>
</Toggle>

// Disabled outline toggle
<Toggle variant="outline" disabled>
  <Underline className="size-4" />
  <span>Disabled</span>
</Toggle>