Docs
Toggle
Toggle
A two-state button that can be either on or off.
import { ToggleButton } from "@repo/tailwindcss/ui/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"
/>
</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:
import { cn } from "@/libs/cn";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ToggleButtonRootProps } from "@kobalte/core/toggle-button";
import { ToggleButton as ToggleButtonPrimitive } from "@kobalte/core/toggle-button";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
export const toggleVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-[box-shadow,color,background-color] hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
{
variants: {
variant: {
default: "bg-transparent",
outline:
"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-9 px-3",
sm: "h-8 px-2",
lg: "h-10 px-3",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
);
type toggleButtonProps<T extends ValidComponent = "button"> =
ToggleButtonRootProps<T> &
VariantProps<typeof toggleVariants> & {
class?: string;
};
export const ToggleButton = <T extends ValidComponent = "button">(
props: PolymorphicProps<T, toggleButtonProps<T>>,
) => {
const [local, rest] = splitProps(props as toggleButtonProps, [
"class",
"variant",
"size",
]);
return (
<ToggleButtonPrimitive
class={cn(
toggleVariants({ variant: local.variant, size: local.size }),
local.class,
)}
{...rest}
/>
);
};Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
import { cn } from "@/libs/cn";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ToggleButtonRootProps } from "@kobalte/core/toggle-button";
import { ToggleButton as ToggleButtonPrimitive } from "@kobalte/core/toggle-button";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
export const toggleVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors transition-property-[box-shadow,color,background-color] hover:(bg-muted text-muted-foreground) focus-visible:(outline-none ring-1.5 ring-ring) disabled:(pointer-events-none opacity-50) data-[pressed]:(bg-accent text-accent-foreground) transition-shadow",
{
variants: {
variant: {
default: "bg-transparent",
outline:
"border border-input bg-transparent shadow-sm hover:(bg-accent text-accent-foreground)",
},
size: {
default: "h-9 px-3",
sm: "h-8 px-2",
lg: "h-10 px-3",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
);
type toggleButtonProps<T extends ValidComponent = "button"> =
ToggleButtonRootProps<T> &
VariantProps<typeof toggleVariants> & {
class?: string;
};
export const ToggleButton = <T extends ValidComponent = "button">(
props: PolymorphicProps<T, toggleButtonProps<T>>,
) => {
const [local, rest] = splitProps(props as toggleButtonProps, [
"class",
"variant",
"size",
]);
return (
<ToggleButtonPrimitive
class={cn(
toggleVariants({ variant: local.variant, size: local.size }),
local.class,
)}
{...rest}
/>
);
};Usage
import { ToggleButton } from "@/components/ui/toggle";<ToggleButton>Toggle</ToggleButton>Examples
Outline
import { ToggleButton } from "@repo/tailwindcss/ui/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"
/>
</svg>
</ToggleButton>
);
};
export default ToggleOutline;With Text
import { ToggleButton } from "@repo/tailwindcss/ui/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"
/>
</svg>
Italic
</ToggleButton>
);
};
export default ToggleWithText;Small
import { ToggleButton } from "@repo/tailwindcss/ui/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"
/>
</svg>
</ToggleButton>
);
};
export default ToggleSmall;Large
import { ToggleButton } from "@repo/tailwindcss/ui/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"
/>
</svg>
</ToggleButton>
);
};
export default ToggleLarge;Disabled
import { ToggleButton } from "@repo/tailwindcss/ui/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"
/>
</svg>
</ToggleButton>
);
};
export default ToggleDisabled;