Components
Loading preview...
// demo.tsx
import { Bold, Italic, Underline, Wifi } from 'lucide-react';
import Toggle from '@/components/ui/indevui-toggle';
function ToggleDemo() {
return (
<div className="flex flex-col items-start gap-8 p-4">
<div className="flex items-end gap-4">
<Toggle size="sm" aria-label="Toggle bold">
<Bold />
</Toggle>
<Toggle aria-label="Toggle italic">
<Italic />
</Toggle>
<Toggle size="lg" aria-label="Toggle underline">
<Underline />
</Toggle>
</div>
<div className="flex items-end gap-4">
<Toggle variant="outline" size="sm" aria-label="Toggle bold">
<Bold />
</Toggle>
<Toggle variant="outline" aria-label="Toggle italic">
<Italic />
</Toggle>
<Toggle variant="outline" size="lg" aria-label="Toggle underline">
<Underline />
</Toggle>
</div>
<div className="flex items-end gap-4">
<Toggle aria-label="Toggle Wi-Fi">
<Wifi />
<span className="sr-only">Wi-Fi</span>
</Toggle>
<Toggle aria-label="Toggle Wi-Fi with text">
<Wifi />
Wi-Fi
</Toggle>
<Toggle disabled aria-label="Toggle Wi-Fi disabled">
<Wifi />
Wi-Fi
</Toggle>
</div>
</div>
);
}
export { ToggleDemo as DemoOne };