Floating 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

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

/* DevSnips React — FloatingActionButton
 * Primary compose action hovering over content. Circular, elevated,
 * fixed to a corner. aria-label required. One per screen.
 */

export type FabPosition = "bottom-right" | "bottom-left" | "top-right";

export interface FloatingActionButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement> {
  icon: ReactNode;
  label: string;
  position?: FabPosition;
  extended?: boolean;
}

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

const POS: Record<FabPosition, string> = {
  "bottom-right": "bottom-6 right-6",
  "bottom-left": "bottom-6 left-6",
  "top-right": "top-6 right-6",
};

export function FloatingActionButton({
  icon,
  label,
  position = "bottom-right",
  extended = false,
  disabled,
  className,
  type = "button",
  ...rest
}: FloatingActionButtonProps) {
  return (
    <button
      type={type}
      aria-label={label}
      className={cx(
        "fixed z-40 inline-flex items-center justify-center gap-2 rounded-full",
        "border border-transparent bg-[var(--ds-color-primary)] text-[var(--ds-color-primary-foreground)]",
        "shadow-[var(--ds-shadow-md)] transition-transform duration-150 ease-out motion-reduce:transition-none",
        "hover:-translate-y-0.5 active:translate-y-0",
        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)]",
        "disabled:pointer-events-none disabled:opacity-50",
        extended ? "h-12 px-5 text-sm [&_svg]:size-5" : "size-14 p-0 [&_svg]:size-5",
        POS[position],
        className,
      )}
      disabled={disabled}
      {...rest}
    >
      {icon}
      {extended && <span>{label}</span>}
    </button>
  );
}

export default FloatingActionButton;

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

/* 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(" ");
}
const POS = {
  "bottom-right": "bottom-6 right-6",
  "bottom-left": "bottom-6 left-6",
  "top-right": "top-6 right-6"
};
export function FloatingActionButton({
  icon,
  label,
  position = "bottom-right",
  extended = false,
  disabled,
  className,
  type = "button",
  ...rest
}) {
  return <button
    type={type}
    aria-label={label}
    className={cx(
      "fixed z-40 inline-flex items-center justify-center gap-2 rounded-full",
      "border border-transparent bg-[var(--ds-color-primary)] text-[var(--ds-color-primary-foreground)]",
      "shadow-[var(--ds-shadow-md)] transition-transform duration-150 ease-out motion-reduce:transition-none",
      "hover:-translate-y-0.5 active:translate-y-0",
      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)]",
      "disabled:pointer-events-none disabled:opacity-50",
      extended ? "h-12 px-5 text-sm [&_svg]:size-5" : "size-14 p-0 [&_svg]:size-5",
      POS[position],
      className
    )}
    disabled={disabled}
    {...rest}
  >
      {icon}
      {extended && <span>{label}</span>}
    </button>;
}

export default FloatingActionButton;

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

# Floating Action Button

A primary compose action hovering over content. Circular, elevated (shadow-md), fixed to a corner. Icon + optional label (extended FAB). `aria-label` is required. Reserve one per screen for the primary creation action.

## 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
<FloatingActionButton icon={<Plus />} label="New invoice" position="bottom-right" onClick={create} />
```

## 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 |
|---|---|---|
| `icon` | `ReactNode` | — (required; the action icon) |
| `label` | `string` | — (required: accessible name; visible when `extended`) |
| `position` | `bottom-right \| bottom-left \| top-right` | `bottom-right` |
| `extended` | `boolean` | `false` (icon+label pill when true) |
| `disabled` | `boolean` | `false` |

Plus all native `ButtonHTMLAttributes<HTMLButtonElement>`.

## Variants

Single solid circular FAB; extended mode renders an icon+label pill. Fixed to a viewport corner.

## Sizes

Default 56px (icon-only) / 48px tall extended. Meets 44px touch target.

## States

default · hover (subtle lift) · focus-visible · 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. `label` is required and rendered as `aria-label`. Hover lift respects reduced motion. The FAB is `position: fixed` — keep exactly one per screen.

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

Reserve for the single primary creation action on a screen (compose, new invoice, new ticket). Don't use for navigation; that's a navbar/back-button's job.