---
url: "https://vueda.dev/v3/reference/theming/keys/Toggle.md"
title: "Toggle"
---

# 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](/v3/reference/theming/keys/_ButtonOutline.md#theme-key-_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. Disabled items use `--disabled-foreground` ink and a `--border` outline; pressed items keep a `--disabled` fill while unpressed items stay transparent.

Vue component: [Toggle](/v3/reference/api/vue/Toggle.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/Toggle.md#theme-key-Toggle-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](/v3/reference/theming/keys/_ButtonOutline.md#theme-key-_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. Disabled items use `--disabled-foreground` ink and a `--border` outline; pressed items keep a `--disabled` fill while unpressed items stay transparent. |

<a id="theme-key-Toggle-root"></a>

## 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](/v3/reference/theming/keys/_ButtonOutline.md#theme-key-_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. Disabled items use `--disabled-foreground` ink and a `--border` outline; pressed items keep a `--disabled` fill while unpressed items stay transparent.

Callback:

```javascript
({ 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 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",

                // Keep the pressed value visible while replacing interactive colors.
                "disabled:!text-disabled-foreground disabled:!bg-transparent disabled:data-[state=on]:!bg-disabled disabled:!hairline-border",

                // 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": 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`