components/button/button.react.tsx

Functions

Imports

It imports components/button/button.ts. Imported by components/switch-reason/switch-reason.react.tsx.

Source

1import { useId, useLayoutEffect, useRef, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from "react";
2import { morphFrom } from "./button.ts";
3
4export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "style"> {
5  variant?: "default" | "primary" | "secondary" | "danger" | "quiet" | "link";
6  size?: "xs" | "sm" | "default" | "lg";
7  // In flight: the label stays (so the width and the name stay) and a spinner covers it.
8  // Clicks are ignored until it settles.
9  pending?: boolean;
10  // Disabled, with the reason written beside the button. The button stays focusable and
11  // the reason is its description; clicks are ignored.
12  disabledReason?: ReactNode;
13  // An icon button: `children` is the icon and `label` its accessible name.
14  iconOnly?: boolean;
15  label?: string;
16  // A label that changes in place (Save, Saving…, Saved) eases the width and crossfades the
17  // words. The label is wrapped in `.cap-btn-label`.
18  morph?: boolean;
19  children?: ReactNode;
20}
21
22export function Button(props: ButtonProps) {
23  const { variant = "default", size = "default", pending = false, disabledReason, iconOnly = false, label, morph = false, children, type = "button", onClick, className, ...rest } = props;
24  const reasonId = useId();
25  const disabled = disabledReason != null && disabledReason !== false;
26  const describedBy = [rest["aria-describedby"], disabled ? reasonId : null].filter(Boolean).join(" ") || undefined;
27  if (iconOnly && !label && !rest["aria-label"]) console.warn("Button: an icon-only button needs a label.");
28
29  // The morph: after React writes a new label, animate from the last width and a copy of the
30  // last label (button.ts).
31  const labelRef = useRef<HTMLSpanElement>(null);
32  const last = useRef<{ text: string; width: number; copy: HTMLElement } | null>(null);
33  useLayoutEffect(() => {
34    const el = labelRef.current;
35    const button = el?.parentElement;
36    if (!morph || !el || !button) return;
37    const prev = last.current;
38    const text = el.textContent ?? "";
39    const width = prev && prev.text !== text ? morphFrom(button, prev.width, prev.copy) : button.offsetWidth;
40    last.current = { text, width, copy: el.cloneNode(true) as HTMLElement };
41  });
42
43  const click = (e: MouseEvent<HTMLButtonElement>) => {
44    if (disabled || pending) {
45      e.preventDefault();
46      return;
47    }
48    onClick?.(e);
49  };
50
51  const button = (
52    <button
53      {...rest}
54      type={type}
55      className={className ? `cap-btn ${className}` : "cap-btn"}
56      data-variant={variant === "default" ? undefined : variant}
57      data-size={size === "default" ? undefined : size}
58      data-icon-only={iconOnly ? "" : undefined}
59      aria-label={iconOnly ? (label ?? rest["aria-label"]) : rest["aria-label"]}
60      aria-disabled={disabled ? true : undefined}
61      aria-describedby={describedBy}
62      aria-busy={pending ? true : undefined}
63      onClick={click}
64    >
65      {pending ? <span className="cap-btn-spinner" aria-hidden="true" /> : null}
66      {pending || morph ? (
67        <span className="cap-btn-label" ref={labelRef}>
68          {children}
69        </span>
70      ) : (
71        children
72      )}
73    </button>
74  );
75
76  if (!disabled) return button;
77  return (
78    <>
79      {button}
80      <span className="cap-btn-reason" id={reasonId}>
81        {disabledReason}
82      </span>
83    </>
84  );
85}
86
87// Buttons sharing one edge. `orientation` is horizontal unless set.
88export function ButtonGroup(props: { label?: string; orientation?: "horizontal" | "vertical"; children?: ReactNode; className?: string }) {
89  const { label, orientation = "horizontal", children, className } = props;
90  return (
91    <div role="group" aria-label={label} className={className ? `cap-btn-group ${className}` : "cap-btn-group"} data-orientation={orientation === "vertical" ? "vertical" : undefined}>
92      {children}
93    </div>
94  );
95}
96
97// Static text that sits in a group beside the buttons.
98export function ButtonGroupText(props: { children?: ReactNode }) {
99  return <span className="cap-btn-group-text">{props.children}</span>;
100}