Toggle

Docs

Toggle

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

This component uses Radix UI

import { Bold } from 'lucide-react'
 
import { Toggle_Shadcn_ } from 'ui'
 
export function ToggleDemo() {
  return (
    <Toggle_Shadcn_ aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </Toggle_Shadcn_>
  )
}

Installation

npx shadcn-ui@latest add toggle

Usage

import { Toggle } from '@/components/ui/toggle'

<Toggle>Toggle</Toggle>

Examples

Default

import { Bold } from 'lucide-react'
 
import { Toggle_Shadcn_ } from 'ui'
 
export function ToggleDemo() {
  return (
    <Toggle_Shadcn_ aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </Toggle_Shadcn_>
  )
}

Toggle

Installation

Usage

Examples

Default

Outline

With Text

Small

Large

Disabled