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;
npx shadcn-solid@latest add toggle
npm install @kobalte/core
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} /> ); };
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} /> ); };
import { ToggleButton } from "@/components/ui/toggle";
<ToggleButton>Toggle</ToggleButton>
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;
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;
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;
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;
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;