Sticky Action 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

import type { ButtonHTMLAttributes, ReactNode } from "react";

/* DevSnips React — StickyActionButton
 * Persistent primary CTA. Sticks to the bottom of the viewport with a
 * hairline top border + translucent backdrop-blurred surface. Single
 * full-width block action.
 */

export type StickyVariant = "solid" | "destructive" | "success";

export interface StickyActionButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: StickyVariant;
  loading?: boolean;
  iconLeft?: ReactNode;
  iconRight?: ReactNode;
}

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

function Spinner() {
  return (
    <svg className="h-[1em] w-[1em] shrink-0 animate-spin motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="3" className="opacity-25" />
      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
    </svg>
  );
}

const SIZES_LG = "h-10 gap-2 px-4 text-[13px] [&_svg]:size-[18px]";

const VARIANTS: Record<StickyVariant, string> = {
  solid: "border-transparent bg-[var(--ds-color-primary)] text-[var(--ds-color-primary-foreground)] hover:bg-[color-mix(in_srgb,var(--ds-color-primary)_88%,#000)] active:bg-[color-mix(in_srgb,var(--ds-color-primary)_80%,#000)]",
  destructive: "border-transparent bg-[var(--ds-color-destructive)] text-[var(--ds-color-destructive-foreground)] hover:bg-[color-mix(in_srgb,var(--ds-color-destructive)_88%,#000)] active:bg-[color-mix(in_srgb,var(--ds-color-destructive)_80%,#000)]",
  success: "border-transparent bg-[var(--ds-color-success)] text-[var(--ds-color-success-foreground)] hover:bg-[color-mix(in_srgb,var(--ds-color-success)_88%,#000)] active:bg-[color-mix(in_srgb,var(--ds-color-success)_80%,#000)]",
};

export function StickyActionButton({
  children,
  variant = "solid",
  loading = false,
  disabled,
  iconLeft,
  iconRight,
  className,
  type = "button",
  ...rest
}: StickyActionButtonProps) {
  const isDisabled = disabled || loading;
  return (
    <div
      className={cx(
        "sticky bottom-0 left-0 right-0 z-20 flex items-center gap-3",
        "border-t border-[var(--ds-color-border)] bg-[color-mix(in_srgb,var(--ds-color-background)_88%,transparent)]",
        "px-0 py-3 backdrop-blur",
        className,
      )}
    >
      <button
        type={type}
        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],
          SIZES_LG,
          "w-full",
          className,
        )}
        disabled={isDisabled}
        aria-busy={loading || undefined}
        {...rest}
      >
        {loading ? <Spinner /> : iconLeft}
        <span>{children}</span>
        {!loading && iconRight}
      </button>
    </div>
  );
}

export default StickyActionButton;

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

/* 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.
 */

function cx(...parts) {
  return parts.filter(Boolean).join(" ");
}
function Spinner() {
  return <svg className="h-[1em] w-[1em] shrink-0 animate-spin motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="3" className="opacity-25" />
      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
    </svg>;
}
const SIZES_LG = "h-10 gap-2 px-4 text-[13px] [&_svg]:size-[18px]";
const VARIANTS = {
  solid: "border-transparent bg-[var(--ds-color-primary)] text-[var(--ds-color-primary-foreground)] hover:bg-[color-mix(in_srgb,var(--ds-color-primary)_88%,#000)] active:bg-[color-mix(in_srgb,var(--ds-color-primary)_80%,#000)]",
  destructive: "border-transparent bg-[var(--ds-color-destructive)] text-[var(--ds-color-destructive-foreground)] hover:bg-[color-mix(in_srgb,var(--ds-color-destructive)_88%,#000)] active:bg-[color-mix(in_srgb,var(--ds-color-destructive)_80%,#000)]",
  success: "border-transparent bg-[var(--ds-color-success)] text-[var(--ds-color-success-foreground)] hover:bg-[color-mix(in_srgb,var(--ds-color-success)_88%,#000)] active:bg-[color-mix(in_srgb,var(--ds-color-success)_80%,#000)]"
};
export function StickyActionButton({
  children,
  variant = "solid",
  loading = false,
  disabled,
  iconLeft,
  iconRight,
  className,
  type = "button",
  ...rest
}) {
  const isDisabled = disabled || loading;
  return <div
    className={cx(
      "sticky bottom-0 left-0 right-0 z-20 flex items-center gap-3",
      "border-t border-[var(--ds-color-border)] bg-[color-mix(in_srgb,var(--ds-color-background)_88%,transparent)]",
      "px-0 py-3 backdrop-blur",
      className
    )}
  >
      <button
    type={type}
    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],
      SIZES_LG,
      "w-full",
      className
    )}
    disabled={isDisabled}
    aria-busy={loading || undefined}
    {...rest}
  >
        {loading ? <Spinner /> : iconLeft}
        <span>{children}</span>
        {!loading && iconRight}
      </button>
    </div>;
}

export default StickyActionButton;

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

# Sticky Action Button

A persistent primary CTA that sticks to the bottom of the viewport with a hairline top border and a translucent surface so content scrolls beneath. Use for the single primary action on long forms or review screens.

## 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
<StickyActionButton onClick={submit} loading={saving}>Submit order</StickyActionButton>
```

## 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 |
|---|---|---|
| `children` | `ReactNode` | — |
| `variant` | `solid \| destructive \| success` | `solid` |
| `loading` | `boolean` | `false` |
| `disabled` | `boolean` | `false` |
| `iconLeft` / `iconRight` | `ReactNode` | — |

Plus all native `ButtonHTMLAttributes<HTMLButtonElement>`. The component renders a sticky bar wrapping the action.

## Variants

solid (default) · destructive · success. The bar is sticky with a hairline top border and a translucent backdrop-blurred surface.

## Sizes

Always `lg` block (full-width) inside the bar — it's the single primary action on a long surface.

## States

default · hover · active · focus-visible · loading (spinner + `aria-busy`, disabled) · 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. The bar is a landmark-free wrapper; the action is a full-width block button so it's an unambiguous primary target. Reduced motion disables the bar's backdrop transition.

## 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

Use for the single primary action on long forms or review screens (Submit order, Confirm and pay). Pair with a non-destructive escape above if needed.