Toggle

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

A simple 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="h-4 w-4" />
</Toggle>

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

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