Toggle

toggleui

On/off button (different from Switch — this is shaped like a button and lives in toolbars). Three sizes, two variants. Use inside Toggle Group or standalone for "press to enable" buttons like bold / italic.

Also available for Vue ->

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/toggle.json

$npx shadcn@latest add https://uipkge.dev/r/react/toggle.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/toggle.json

$bunx shadcn@latest add https://uipkge.dev/r/react/toggle.json

Named registry:npx shadcn@latest add @uipkge-react/toggleInstalls to:components/ui/toggle/

Examples

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`variant`	`'default''outline'`	`default`	optional
`size`	`'default''sm''lg'`	`default`	optional
`asChild` emitting a <button> — the React equivalent of reka-ui's as-child.	`boolean`	—	optional

npm dependencies

class-variance-authority @radix-ui/react-toggle

Used by

rich-text-editor

[data-used-by-list] { max-height: none !important; overflow: visible !important; } [data-used-by-toggle] { display: none !important; }

Files installed (3)

components/ui/toggle/toggle.tsx0.9 kB

'use client'

import * as React from 'react'
import * as TogglePrimitive from '@radix-ui/react-toggle'
import { cn } from '@/lib/utils'
import { toggleVariants, type ToggleVariants } from './toggle.variants'

export interface ToggleProps
  extends Omit<React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, 'asChild'>, ToggleVariants {
  /** Render the child element as the toggle (merging props/styles) instead of
   *  emitting a <button> — the React equivalent of reka-ui's as-child. */
  asChild?: boolean
}

const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(
  ({ className, variant, size, ...props }, ref) => (
    <TogglePrimitive.Root
      ref={ref}
      data-uipkge=""
      data-slot="toggle"
      className={cn(toggleVariants({ variant, size }), className)}
      {...props}
    />
  ),
)
Toggle.displayName = 'Toggle'

export { Toggle }