Toggle

Toggle primitive wrapper

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

...

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

function BookmarkIcon() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18l-6-4-6 4z" /></svg>
}

export default function ToggleDemoExample() {
  return <Toggle variant="outline" size="sm" aria-label="Toggle bookmark"><BookmarkIcon />Bookmark</Toggle>
}

Installation

npx @fictjs/shadcn@latest add toggle

Install the runtime dependencies:

npm install @fictjs/radix-ui class-variance-authority

Copy the Fict shadcn component into your project.

Source

components/ui/toggle.tsx

src/components/ui/toggle.tsx

import { Toggle as TogglePrimitive } from '@fictjs/radix-ui'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/cn'

const toggleVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline: 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-9 px-3',
        sm: 'h-8 px-2.5',
        lg: 'h-10 px-3.5',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

type ToggleProps = VariantProps<typeof toggleVariants> & {
  class?: string
  children?: unknown
  [key: string]: unknown
}

export function Toggle(props: ToggleProps) {
  const { class: className, variant, size, children, ...rest } = props
  return (
    <TogglePrimitive.Root class={cn(toggleVariants({ variant, size }), className)} {...rest}>
      {children}
    </TogglePrimitive.Root>
  )
}

export { toggleVariants }

Usage

Examples

Outline

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

...

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

export default function ToggleOutlineExample() {
  return (
    <div class="flex gap-2"><Toggle variant="outline" aria-label="Toggle italic">Italic</Toggle><Toggle variant="outline" aria-label="Toggle bold">Bold</Toggle></div>
  )
}

Text

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

...

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

export default function ToggleTextExample() {
  return <Toggle aria-label="Toggle italic">Italic</Toggle>
}

Sizes

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

...

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

export default function ToggleSizesExample() {
  return (
    <div class="flex items-center gap-2"><Toggle variant="outline" size="sm" aria-label="Toggle small">Small</Toggle><Toggle variant="outline" aria-label="Toggle default">Default</Toggle><Toggle variant="outline" size="lg" aria-label="Toggle large">Large</Toggle></div>
  )
}

Disabled

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

...

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

export default function ToggleDisabledExample() {
  return (
    <div class="flex gap-2"><Toggle disabled aria-label="Toggle disabled">Disabled</Toggle><Toggle disabled variant="outline" aria-label="Toggle disabled outline">Disabled</Toggle></div>
  )
}

Rtl

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

...

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

const translations = {
  ar: { dir: 'rtl', bookmark: 'إشارة مرجعية' },
  he: { dir: 'rtl', bookmark: 'סימנייה' },
  en: { dir: 'ltr', bookmark: 'Bookmark' },
} as const

export default function ToggleRtlExample() {
  let language = $state<keyof typeof translations>('ar')
  const text = () => translations[language]

  return (
    <div class="grid gap-4"><select value={language} onChange={event => { language = event.currentTarget.value as keyof typeof translations }}><option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option></select><Toggle dir={text().dir} variant="outline" size="sm" aria-label="Toggle bookmark">{text().bookmark}</Toggle></div>
  )
}

Toast Toggle Group