Toggle

npx shadcn@latest add https://ui.saasflare.io/r/toggle.json

pnpm add @saasflare/ui

"use client"import { useState } from "react"import { MoonIcon, Toggle } from "@saasflare/ui"/** A two-state toggle button controlling a single setting. */export function Demo() {    const [pressed, setPressed] = useState(false)    return (        <Toggle            pressed={pressed}            onPressedChange={setPressed}            aria-label="Toggle dark mode"        >            <MoonIcon className="size-4" />            Dark mode        </Toggle>    )}

"use client"import { Toggle } from "@saasflare/ui"/** The default and outline toggle treatments across sizes. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-3">            <Toggle variant="default" defaultPressed>                Default            </Toggle>            <Toggle variant="outline">Outline</Toggle>            <Toggle variant="outline" size="sm">                Small            </Toggle>            <Toggle variant="outline" size="lg">                Large            </Toggle>        </div>    )}