Toggle

1import { Heart } from 'lucide-react'
2
3import { Toggle } from '@/components/ui/toggle'
4
5export function ToggleDemo() {
6    return (
7        <Toggle
8            aria-label="Toggle like"
9            variant={'outline'}
10            className="data-[state=on]:*:[svg]:fill-danger data-[state=on]:*:[svg]:stroke-danger data-[state=on]:bg-gray-100"
11        >
12            <Heart />
13            Like
14        </Toggle>
15    )
16}
17

1'use client'
2import { useState } from 'react'
3import { Bell, BellOff } from 'lucide-react'
4
5import { Toggle } from '@/components/ui/toggle'
6
7export function ToggleDefault() {
8    const [notify, setNotify] = useState(false)
9
10    return (
11        <Toggle
12            pressed={notify}
13            onPressedChange={setNotify}
14            aria-label="Toggle notifications"
15            className="data-[state=on]:bg-primary flex items-center gap-2 data-[state=on]:*:[svg]:fill-white data-[state=on]:*:[svg]:stroke-white"
16        >
17            {notify ? <Bell /> : <BellOff />}
18            {notify ? 'Notifications On' : 'Notifications Off'}
19        </Toggle>
20    )
21}
22

1'use client'
2import { useState } from 'react'
3import { Lock, Unlock } from 'lucide-react'
4
5import { Toggle } from '@/components/ui/toggle'
6
7export function ToggleOutline() {
8    const [locked, setLocked] = useState(false)
9
10    return (
11        <Toggle
12            pressed={locked}
13            onPressedChange={setLocked}
14            variant="outline"
15            aria-label="Toggle lock"
16            className="data-[state=on]:*:[svg]:stroke-primary flex items-center gap-2"
17        >
18            {locked ? <Lock /> : <Unlock />}
19        </Toggle>
20    )
21}
22

1'use client'
2
3import { useState } from 'react'
4import { Mic, MicOff } from 'lucide-react'
5
6import { Toggle } from '@/components/ui/toggle'
7
8export function ToggleSize() {
9    const [micLg, setMicLg] = useState(false)
10    const [micMd, setMicMd] = useState(false)
11    const [micSm, setMicSm] = useState(false)
12
13    return (
14        <div className="flex items-center gap-4">
15            {/* Large Mic Toggle */}
16            <div className="flex flex-col items-center gap-2">
17                <Toggle
18                    pressed={micLg}
19                    onPressedChange={setMicLg}
20                    size="lg"
21                    variant="outline"
22                    aria-label="Large toggle mic"
23                    className="data-[state=on]:*:[svg]:stroke-primary"
24                >
25                    {micLg ? <Mic /> : <MicOff />}
26                </Toggle>
27                <span className="text-xs font-medium">Large</span>
28            </div>
29
30            {/* Default Mic Toggle */}
31            <div className="flex flex-col items-center gap-2">
32                <Toggle
33                    pressed={micMd}
34                    onPressedChange={setMicMd}
35                    variant="outline"
36                    aria-label="Default toggle mic"
37                    className="data-[state=on]:*:[svg]:stroke-primary"
38                >
39                    {micMd ? (
40                        <Mic className="h-4 w-4" />
41                    ) : (
42                        <MicOff className="h-4 w-4" />
43                    )}
44                </Toggle>
45                <span className="text-xs font-medium">Default</span>
46            </div>
47
48            {/* Small Mic Toggle */}
49            <div className="flex flex-col items-center gap-2">
50                <Toggle
51                    pressed={micSm}
52                    onPressedChange={setMicSm}
53                    size="sm"
54                    variant="outline"
55                    aria-label="Small toggle mic"
56                    className="data-[state=on]:*:[svg]:stroke-primary"
57                >
58                    {micSm ? (
59                        <Mic className="h-3.5 w-3.5" />
60                    ) : (
61                        <MicOff className="h-3.5 w-3.5" />
62                    )}
63                </Toggle>
64                <span className="text-xs font-medium">Small</span>
65            </div>
66        </div>
67    )
68}
69

1'use client'
2
3import { useState } from 'react'
4import { Bell, BellOff, Camera, CameraOff, Wifi, WifiOff } from 'lucide-react'
5
6import { Toggle } from '@/components/ui/toggle'
7
8export function ToggleVariantDemo() {
9    const [bell, setBell] = useState(false)
10    const [wifi, setWifi] = useState(false)
11    const [camera, setCamera] = useState(false)
12
13    return (
14        <div className="flex items-center gap-4">
15            <Toggle
16                disabled
17                pressed={bell}
18                onPressedChange={setBell}
19                aria-label="Toggle notifications"
20                className="data-[state=on]:*:[svg]:stroke-primary flex items-center gap-2"
21            >
22                {bell ? <Bell /> : <BellOff />}
23            </Toggle>
24
25            <Toggle
26                disabled
27                pressed={wifi}
28                onPressedChange={setWifi}
29                variant="outline"
30                aria-label="Toggle Wi-Fi"
31                className="data-[state=on]:*:[svg]:stroke-primary flex items-center gap-2"
32            >
33                {wifi ? <Wifi /> : <WifiOff />}
34            </Toggle>
35
36            <Toggle
37                disabled
38                pressed={camera}
39                onPressedChange={setCamera}
40                variant="ghost"
41                aria-label="Toggle camera"
42                className="data-[state=on]:*:[svg]:stroke-primary flex items-center gap-2"
43            >
44                {camera ? <Camera /> : <CameraOff />}
45            </Toggle>
46        </div>
47    )
48}
49