Toggle

Source: client/lib/theme/vueda-tailwind/controls/index.js

The on/off button shell. Reads as a Button shape (control radius, text-sm font-medium, 16px icon) but the pressed state (data-state=on) paints --accent instead of --primary so a pressed toggle does not compete with a CTA on the same surface. Two variants (default, outline) and three size tiers ride the shared h-vueda-control* scale; the outline variant wears the same hairline-border-strong edge, darkening to hairline-foreground on hover, as _ButtonOutline.root (an inset box-shadow, not a layout border, so it DPR-tracks and matches intrinsic width), and min-w-vueda-control* keeps a single-icon toggle square.

Vue component: Toggle

Slot	Default classes	Description
root	callback	The on/off button shell. Reads as a Button shape (control radius, text-sm font-medium, 16px icon) but the pressed state (data-state=on) paints --accent instead of --primary so a pressed toggle does not compete with a CTA on the same surface. Two variants (default, outline) and three size tiers ride the shared h-vueda-control* scale; the outline variant wears the same hairline-border-strong edge, darkening to hairline-foreground on hover, as _ButtonOutline.root (an inset box-shadow, not a layout border, so it DPR-tracks and matches intrinsic width), and min-w-vueda-control* keeps a single-icon toggle square.

root

The on/off button shell. Reads as a Button shape (control radius, text-sm font-medium, 16px icon) but the pressed state (data-state=on) paints --accent instead of --primary so a pressed toggle does not compete with a CTA on the same surface. Two variants (default, outline) and three size tiers ride the shared h-vueda-control* scale; the outline variant wears the same hairline-border-strong edge, darkening to hairline-foreground on hover, as _ButtonOutline.root (an inset box-shadow, not a layout border, so it DPR-tracks and matches intrinsic width), and min-w-vueda-control* keeps a single-icon toggle square.

Callback:

({ variant, size }) => ({
            class: [
                // Layout and type.
                "inline-flex items-center justify-center gap-2 rounded-vueda-control text-sm font-medium",

                // Interactive and active states.
                "hover:bg-muted hover:text-muted-foreground active:bg-accent-active disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",

                // Icons and focus states.
                "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:hairline-ring focus-visible:focus-ring-shadow transition-shadow",

                // Invalid state and wrapping.
                "aria-invalid:hairline-destructive aria-invalid:focus-visible:focus-ring-shadow-destructive whitespace-nowrap",

                // Variant classes. Default is transparent by absence of a fill; only
                // outline adds a hairline edge + explicit bg-transparent. (A default-variant
                // bg-transparent key here would be cleared by the outline key anyway,
                // since combineClasses is last-write-wins.)
                {
                    "hairline hairline-border-strong hover:hairline-foreground bg-transparent shadow-vueda-control":
                        variant === "outline",
                },

                // Size classes.
                {
                    "h-vueda-control px-2 min-w-vueda-control": !size || size === "default",
                    "h-vueda-control-sm px-1.5 min-w-vueda-control-sm": size === "sm",
                    "h-vueda-control-lg px-2.5 min-w-vueda-control-lg": size === "lg",
                },
            ],
        })

Source: client/lib/theme/vueda-tailwind/controls/Toggle.theme.js:18