Toggle

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

'use client'
import { Toggle } from '@nerdfish/react/toggle'
import { BookmarkIcon } from 'lucide-react'

export default function ToggleExample() {
	return (
		<Toggle
			aria-label="Toggle bookmark"
			size="sm"
			variant="outline"
			className="data-pressed:text-foreground data-pressed:bg-transparent data-pressed:*:[svg]:fill-blue-500 data-pressed:*:[svg]:stroke-blue-500"
		>
			<BookmarkIcon />
			Bookmark
		</Toggle>
	)
}

Outline

'use client'

import { Toggle } from '@nerdfish/react/toggle'
import { Italic } from 'lucide-react'

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

Small

'use client'

import { Toggle } from '@nerdfish/react/toggle'
import { Italic } from 'lucide-react'

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

With Text

'use client'

import { Toggle } from '@nerdfish/react/toggle'
import { Italic } from 'lucide-react'

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

Large

'use client'

import { Toggle } from '@nerdfish/react/toggle'
import { Italic } from 'lucide-react'

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

Disabled

'use client'

import { Toggle } from '@nerdfish/react/toggle'
import { Underline } from 'lucide-react'

export default function ToggleDisabledExample() {
	return (
		<Toggle aria-label="Toggle italic" disabled>
			<Underline className="h-4 w-4" />
		</Toggle>
	)
}