Docs
Toggle
Toggle
A two-state button that can be either on or off.
import { ToggleButton } from "@repo/tailwindcss/default/toggle";
const ToggleDemo = () => {
return (
<ToggleButton aria-label="Toggle italic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
/>
<title>Italic</title>
</svg>
</ToggleButton>
);
};
export default ToggleDemo;import { ToggleButton } from "@repo/tailwindcss/solid/toggle";
const ToggleDemo = () => {
return (
<ToggleButton aria-label="Toggle italic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
/>
<title>Italic</title>
</svg>
</ToggleButton>
);
};
export default ToggleDemo;Installation
npx shadcn-solid@latest add toggleInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import { ToggleButton } from "@/components/ui/toggle";<ToggleButton>Toggle</ToggleButton>Examples
Outline
import { ToggleButton } from "@repo/tailwindcss/default/toggle";
const ToggleOutline = () => {
return (
<ToggleButton variant="outline" aria-label="Toggle italic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
</ToggleButton>
);
};
export default ToggleOutline;import { ToggleButton } from "@repo/tailwindcss/solid/toggle";
const ToggleOutline = () => {
return (
<ToggleButton variant="outline" aria-label="Toggle italic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
</ToggleButton>
);
};
export default ToggleOutline;With Text
import { ToggleButton } from "@repo/tailwindcss/default/toggle";
const ToggleWithText = () => {
return (
<ToggleButton aria-label="Toggle italic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-2 h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
Italic
</ToggleButton>
);
};
export default ToggleWithText;import { ToggleButton } from "@repo/tailwindcss/solid/toggle";
const ToggleWithText = () => {
return (
<ToggleButton aria-label="Toggle italic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-2 h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
Italic
</ToggleButton>
);
};
export default ToggleWithText;Small
import { ToggleButton } from "@repo/tailwindcss/default/toggle";
const ToggleSmall = () => {
return (
<ToggleButton size="sm" aria-label="Toggle italic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
</ToggleButton>
);
};
export default ToggleSmall;import { ToggleButton } from "@repo/tailwindcss/solid/toggle";
const ToggleSmall = () => {
return (
<ToggleButton size="sm" aria-label="Toggle italic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
</ToggleButton>
);
};
export default ToggleSmall;Large
import { ToggleButton } from "@repo/tailwindcss/default/toggle";
const ToggleLarge = () => {
return (
<ToggleButton size="lg" aria-label="Toggle italic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
</ToggleButton>
);
};
export default ToggleLarge;import { ToggleButton } from "@repo/tailwindcss/solid/toggle";
const ToggleLarge = () => {
return (
<ToggleButton size="lg" aria-label="Toggle italic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
</ToggleButton>
);
};
export default ToggleLarge;Disabled
import { ToggleButton } from "@repo/tailwindcss/default/toggle";
const ToggleDisabled = () => {
return (
<ToggleButton disabled aria-label="Toggle underline">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
/>
<title>Underline</title>
</svg>
</ToggleButton>
);
};
export default ToggleDisabled;import { ToggleButton } from "@repo/tailwindcss/solid/toggle";
const ToggleDisabled = () => {
return (
<ToggleButton disabled aria-label="Toggle underline">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
/>
<title>Underline</title>
</svg>
</ToggleButton>
);
};
export default ToggleDisabled;