Components
Starting preview...
A two-state button that can be either on or off.
npx shadcn@latest add https://21st.dev/r/shadcn/toggleimport { Bold, Italic, Underline } from "lucide-react";
import { Toggle } from "@/components/ui/toggle"
function ToggleDemo() {
return (
<Toggle aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</Toggle>
)
}
function ToggleOutline() {
return (
<Toggle variant="outline" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</Toggle>
);
}
function ToggleWithText() {
return (
<Toggle aria-label="Toggle italic">
<Italic />
Italic
</Toggle>
);
}
function ToggleSm() {
return (
<Toggle size="sm" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</Toggle>
);
}
function ToggleLg() {
return (
<Toggle size="lg" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</Toggle>
);
}
function ToggleDisabled() {
return (
<Toggle aria-label="Toggle underline" disabled>
<Underline className="h-4 w-4" />
</Toggle>
);
}
export default {
ToggleDemo,
ToggleOutline,
ToggleWithText,
ToggleSm,
ToggleLg,
ToggleDisabled,
};