Toggle
A two-state button that can be either on or off.
'use client';
import { Toggle } from '@/components/ui/toggle';
import { Bold } from 'lucide-react';
export function ToggleDefault() {
return (
<Toggle aria-label='Toggle bold'>
<Bold />
</Toggle>
);
}
Installation
Usage
import { Toggle } from "@/components/ui/toggle"<Toggle aria-label="Toggle bold">
<Bold />
</Toggle>Examples
Outline
'use client';
import { Toggle } from '@/components/ui/toggle';
import { Italic } from 'lucide-react';
export function ToggleOutline() {
return (
<Toggle variant='outline' aria-label='Toggle italic'>
<Italic />
</Toggle>
);
}
With Text
'use client';
import { Toggle } from '@/components/ui/toggle';
import { Italic } from 'lucide-react';
export function ToggleWithText() {
return (
<Toggle aria-label='Toggle italic'>
<Italic />
Italic
</Toggle>
);
}