Toggle Variants (cva config)

Purpose

toggleVariants is the cva (class-variance-authority) configuration powering every <Toggle> render. It is split from toggle.tsx into its own module so an ejected source copy under npx shadcn@latest add @suaveplan/toggle keeps the cva configuration in a dedicated file. Theme overrides flow through useThemedVariants("Toggle", toggleVariants).

Features

Two visual variants (default, outline) covering the upstream shadcn surface.
Three sizes (sm, default, lg) for use in dense toolbars or roomy headers.
data-[state=on]:bg-accent data-[state=on]:text-accent-foreground flips the colour when pressed.
hover:bg-muted hover:text-muted-foreground for the pointer-hover affordance.
data-icon slot rules ([&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0) so child icons inherit sizing.
disabled:pointer-events-none disabled:opacity-50 for the native disabled state.
motion-reduce:transition-none for users with prefers-reduced-motion: reduce.
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 for keyboard-only focus styling.

Usage: Basic Example

import { toggleVariants } from "@suaveplan/react-ui";

const className = toggleVariants({ variant: "default", size: "default" });

Usage: Advanced Example

import { toggleVariants, cn } from "@suaveplan/react-ui";

export function CustomToggle({ active }: { active: boolean }) {
    return (
        <button
            type="button"
            aria-pressed={active}
            data-state={active ? "on" : "off"}
            className={cn(
                toggleVariants({ variant: "outline", size: "lg" }),
                active ? "ring-2 ring-accent" : ""
            )}
        >
            Toggle
        </button>
    );
}

API Reference

`toggleVariants(props?: { variant?: "default" | "outline"; size?: "sm" | "default" | "lg" }): string`

Returns the cva-merged class string for the supplied variant + size combination. Both fields are optional; omitted fields fall back to the cva defaultVariants (variant: "default", size: "default").

Implementation Notes

The resolver is tagged with componentName: "Toggle" (non-enumerable, non-writable) via defineVariants.
The cva config mirrors the visual surface of <Button> so toolbars combining <Button> + <Toggle> look coherent without per-component overrides.
The data-icon slot rules are duplicated between <Button> and <Toggle> because both surfaces accept the same icon-as-child pattern; consumers benefit from the consistent sizing.
Tokens reference theme-driven CSS custom properties (bg-accent, text-accent-foreground, bg-muted, text-muted-foreground) so the colour palette comes from the active ThemePlugin.cssVariables payload.

2.8 KiB Raw Blame History