Toggle Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

import { useState } from "react";
import type { ButtonHTMLAttributes } from "react";

/* DevSnips React — ToggleButton
 * Single binary switch. Controlled (pressed) or uncontrolled
 * (defaultPressed). Exposes aria-pressed and swaps to surface-active when on.
 */

export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
export type ToggleVariant = "ghost" | "outline" | "secondary";

export interface ToggleButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
  pressed?: boolean;
  defaultPressed?: boolean;
  onToggle?: (pressed: boolean) => void;
  label: string;
  iconOff?: string;
  iconOn?: string;
  variant?: ToggleVariant;
  size?: ButtonSize;
  showLabel?: boolean;
}

function cx(...parts: Array<string | false | null | undefined>): string {
  return parts.filter(Boolean).join(" ");
}

const SIZES: Record<ButtonSize, string> = {
  xs: "h-7 gap-1 px-2 text-xs [&_svg]:size-[14px]",
  sm: "h-8 gap-1.5 px-3 text-xs [&_svg]:size-[14px]",
  md: "h-9 gap-2 px-3.5 text-[13px] [&_svg]:size-4",
  lg: "h-10 gap-2 px-4 text-[13px] [&_svg]:size-[18px]",
  xl: "h-11 gap-2 px-5 text-sm [&_svg]:size-5",
};

const VARIANTS: Record<ToggleVariant, string> = {
  ghost: "border-transparent bg-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)] active:bg-[var(--ds-color-surface-active)]",
  outline: "border-[var(--ds-color-border-strong)] bg-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)] active:bg-[var(--ds-color-surface-active)]",
  secondary: "border-[var(--ds-color-border)] bg-[var(--ds-color-secondary)] text-[var(--ds-color-secondary-foreground)] hover:bg-[var(--ds-color-surface-active)] active:bg-[var(--ds-color-surface-active)]",
};

const ICON_ONLY: Record<ButtonSize, string> = {
  xs: "h-7 w-7 px-0 [&_svg]:size-[14px]",
  sm: "h-8 w-8 px-0 [&_svg]:size-[14px]",
  md: "h-9 w-9 px-0 [&_svg]:size-4",
  lg: "h-10 w-10 px-0 [&_svg]:size-[18px]",
  xl: "h-11 w-11 px-0 [&_svg]:size-5",
};

function Icon({ name, className }: { name?: string; className?: string }) {
  if (!name) return null;
  const common = { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": "true", focusable: "false" } as const;
  const paths: Record<string, React.ReactNode> = {
    "pin": <path d="M12 17v5" />,
    "bell": <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" /></>,
    "star": <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />,
    "bookmark": <path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />,
  };
  return <svg {...common}>{paths[name]}</svg>;
}

export function ToggleButton({
  pressed: pressedProp,
  defaultPressed = false,
  onToggle,
  label,
  iconOff,
  iconOn,
  variant = "ghost",
  size = "md",
  showLabel = true,
  disabled,
  className,
  type = "button",
  ...rest
}: ToggleButtonProps) {
  const [internal, setInternal] = useState(defaultPressed);
  const isControlled = pressedProp !== undefined;
  const value = isControlled ? pressedProp : internal;
  function click() {
    const next = !value;
    if (!isControlled) setInternal(next);
    onToggle?.(next);
  }
  return (
    <button
      type={type}
      aria-pressed={value}
      aria-label={showLabel ? undefined : label}
      className={cx(
        "inline-flex select-none items-center justify-center whitespace-nowrap rounded-[var(--ds-radius-sm)] border font-medium leading-none transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)] disabled:pointer-events-none disabled:opacity-50",
        VARIANTS[variant],
        value && "bg-[var(--ds-color-surface-active)] font-semibold",
        showLabel ? SIZES[size] : ICON_ONLY[size],
        className,
      )}
      disabled={disabled}
      onClick={click}
      {...rest}
    >
      <Icon name={value ? (iconOn ?? iconOff) : iconOff} className="shrink-0" />
      {showLabel && <span>{label}</span>}
    </button>
  );
}

export default ToggleButton;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

/* DevSnips React — JavaScript parity build.
 * Same API, behavior, and classes as code.tsx; TypeScript types removed.
 * Regenerated from code.tsx — edit code.tsx and re-run the generator.
 */

import { useState } from "react";
function cx(...parts) {
  return parts.filter(Boolean).join(" ");
}
const SIZES = {
  xs: "h-7 gap-1 px-2 text-xs [&_svg]:size-[14px]",
  sm: "h-8 gap-1.5 px-3 text-xs [&_svg]:size-[14px]",
  md: "h-9 gap-2 px-3.5 text-[13px] [&_svg]:size-4",
  lg: "h-10 gap-2 px-4 text-[13px] [&_svg]:size-[18px]",
  xl: "h-11 gap-2 px-5 text-sm [&_svg]:size-5"
};
const VARIANTS = {
  ghost: "border-transparent bg-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)] active:bg-[var(--ds-color-surface-active)]",
  outline: "border-[var(--ds-color-border-strong)] bg-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)] active:bg-[var(--ds-color-surface-active)]",
  secondary: "border-[var(--ds-color-border)] bg-[var(--ds-color-secondary)] text-[var(--ds-color-secondary-foreground)] hover:bg-[var(--ds-color-surface-active)] active:bg-[var(--ds-color-surface-active)]"
};
const ICON_ONLY = {
  xs: "h-7 w-7 px-0 [&_svg]:size-[14px]",
  sm: "h-8 w-8 px-0 [&_svg]:size-[14px]",
  md: "h-9 w-9 px-0 [&_svg]:size-4",
  lg: "h-10 w-10 px-0 [&_svg]:size-[18px]",
  xl: "h-11 w-11 px-0 [&_svg]:size-5"
};
function Icon({ name, className }) {
  if (!name) return null;
  const common = { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": "true", focusable: "false" };
  const paths = {
    "pin": <path d="M12 17v5" />,
    "bell": <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" /></>,
    "star": <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />,
    "bookmark": <path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
  };
  return <svg {...common}>{paths[name]}</svg>;
}
export function ToggleButton({
  pressed: pressedProp,
  defaultPressed = false,
  onToggle,
  label,
  iconOff,
  iconOn,
  variant = "ghost",
  size = "md",
  showLabel = true,
  disabled,
  className,
  type = "button",
  ...rest
}) {
  const [internal, setInternal] = useState(defaultPressed);
  const isControlled = pressedProp !== undefined;
  const value = isControlled ? pressedProp : internal;
  function click() {
    const next = !value;
    if (!isControlled) setInternal(next);
    onToggle?.(next);
  }
  return <button
    type={type}
    aria-pressed={value}
    aria-label={showLabel ? undefined : label}
    className={cx(
      "inline-flex select-none items-center justify-center whitespace-nowrap rounded-[var(--ds-radius-sm)] border font-medium leading-none transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)] disabled:pointer-events-none disabled:opacity-50",
      VARIANTS[variant],
      value && "bg-[var(--ds-color-surface-active)] font-semibold",
      showLabel ? SIZES[size] : ICON_ONLY[size],
      className
    )}
    disabled={disabled}
    onClick={click}
    {...rest}
  >
      <Icon name={value ? iconOn ?? iconOff : iconOff} className="shrink-0" />
      {showLabel && <span>{label}</span>}
    </button>;
}

export default ToggleButton;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# Toggle Button

A single binary switch. Controlled via `pressed`, or uncontrolled via `defaultPressed`. Exposes `aria-pressed` and swaps to `surface-active` when on so the state is conveyed by more than color alone.

## Installation

This component requires **React** and **Tailwind CSS**. Drop `code.tsx` (or `code.jsx` for JavaScript projects) into your project. Tailwind utility classes are included directly in the component, so no separate CSS file is required.

The component consumes the DevSnips semantic design tokens through Tailwind arbitrary values (for example `bg-[var(--ds-color-primary)]`). Define the `--ds-*` tokens once in your theme — see [React/DESIGN_TOKENS.md](../../../DESIGN_TOKENS.md) for the full token spec.

## Usage

```tsx
<ToggleButton pressed={on} onToggle={setOn}>Pinned</ToggleButton>
```

## JavaScript

A `code.jsx` build is provided for projects that ship plain JSX. It exposes the same API and behavior as `code.tsx` — only the TypeScript types are removed.

## Props

| Prop | Type | Default |
|---|---|---|
| `pressed` | `boolean` | — (controlled; if omitted, uncontrolled) |
| `defaultPressed` | `boolean` | `false` (uncontrolled initial) |
| `onToggle` | `(pressed: boolean) => void` | — |
| `label` | `string` | — (visible + accessible name when `showLabel`) |
| `iconOff` / `iconOn` | `string` | — (icon name per state) |
| `variant` | `ghost \| outline \| secondary` | `ghost` |
| `size` | `ButtonSize` | `md` |
| `showLabel` | `boolean` | `true` (icon-only when false; `label` becomes `aria-label`) |

Plus all native `ButtonHTMLAttributes<HTMLButtonElement>`.

## Variants

ghost (default) · outline · secondary.

## Sizes

xs (28px) · sm (32px) · **md (36px, default)** · lg (40px) · xl (44px). Horizontal padding scales 8 → 20px; icons scale 14 → 20px.

## States

default · hover · focus-visible · **pressed/on** (`aria-pressed="true"` + `surface-active` + font-weight) · disabled (reduced opacity).

## Accessibility

Renders a native `<button>`. Focus-visible ring uses `color.focus-ring`. Loading sets `aria-busy` and disables to prevent double-submit. Disabled never removes the affordance (reduced opacity, not hidden). Meets the 44px touch target at lg/xl. `aria-pressed` reflects the pressed state and the surface changes so on/off is conveyed by background + state, not color alone. Icon-only toggles use `label` as `aria-label`.

## Styling

Tailwind classes are included directly in the component and consume the DevSnips semantic design tokens (`--ds-*`) via arbitrary values. The button themes with the surface automatically in light and dark mode. No component-specific CSS file is needed.

## Design Tokens

See [React/DESIGN_TOKENS.md](../../../DESIGN_TOKENS.md) for the authoritative token specification. This button uses the semantic color, radius, and motion tokens; define them once in your project theme and every button in the family stays in sync.

## Notes

For a joined set of toggles (single- or multi-select), use ToggleGroup. A standalone ToggleButton is one binary switch.