react.form.button

"use client";
import { Button } from "#fune/react.form.button@^1";

<Button>Save and continue</Button>
<Button variant="secondary" type="button" onClick={findAddress}>Find address</Button>
<Button variant="warning" name="action" value="delete">Delete account</Button>
<Button loading={saving} loadingText="Saving">Save and continue</Button>

export function Button(props: ButtonProps): JSX.Element

export type ButtonVariant = "primary" | "secondary" | "warning";

export type ButtonType = "submit" | "button" | "reset";

/** An action a person takes, such as "Save and continue". */
export interface ButtonProps {
  /** the text, in sentence case, saying what the button does */
  readonly children: ReactNode;
  /** primary when left out; secondary for other actions; warning (red) for a destructive one */
  readonly variant?: ButtonVariant;
  /** submit when left out */
  readonly type?: ButtonType;
  /** the button's id; none is rendered when left out */
  readonly id?: string;
  /** submitted with value when this button submits the form */
  readonly name?: string;
  /** submitted under name */
  readonly value?: string;
  /** cannot be pressed or focused; GOV.UK advises against it */
  readonly disabled?: boolean;
  /** an action is under way: still focusable, but aria-disabled and presses are ignored */
  readonly loading?: boolean;
  /** shown instead of children while loading, such as "Saving" */
  readonly loadingText?: ReactNode;
  /** called when pressed, unless disabled or loading */
  readonly onClick?: () => void;
  /** added to the button's classes */
  readonly className?: string;
}

import { Button } from "#fune/react.form.button@^1";

"use client";

import type { JSX, MouseEvent, ReactNode } from "react";
import type { ButtonProps } from "./react_form_button_types.ts";

function present(node: ReactNode): boolean {
  return node !== null && node !== undefined && node !== false && node !== "";
}

/**
 * The GOV.UK button. While loading it stays enabled, so it keeps focus and a
 * screen reader still finds it, but it says aria-disabled="true" and a press
 * is swallowed, form submission included: the second click of a double click
 * sends nothing twice. disabled is the real attribute, with aria-disabled as
 * GOV.UK renders it.
 */
export function Button(props: ButtonProps): JSX.Element {
  const { children, id, name, value, disabled, loading, loadingText, onClick, className } = props;
  const variant = props.variant ?? "primary";
  const classes = [
    "fune-button",
    variant === "primary" ? null : `fune-button--${variant}`,
    loading ? "fune-button--loading" : null,
    className || null,
  ]
    .filter(Boolean)
    .join(" ");
  function press(event: MouseEvent<HTMLButtonElement>): void {
    if (loading) {
      event.preventDefault();
      return;
    }
    onClick?.();
  }
  return (
    <button
      className={classes}
      id={id}
      type={props.type ?? "submit"}
      name={name}
      value={value}
      disabled={disabled}
      aria-disabled={disabled || loading ? true : undefined}
      onClick={press}
    >
      {loading && present(loadingText) ? loadingText : children}
    </button>
  );
}

Install

npm install react react-dom

fune build

With that line in your source, in a TypeScript project (language typescript in fune.project) with React ^19 installed (Functional Weave does not ship it, and fune build stops with the npm install line if it is missing), fune build resolves it and nothing else, pins them in fune.lock, downloads only the TypeScript package of each, and builds the code above into your project’s .fune/build, one readable file per capability with a header linking back here. Or pin a range in fune.project and build in one step:

fune add react.form.button

The manifest, vectors and README with only the TypeScript implementation. Install it without the registry with fune add ./react.form.button-1.0.1-typescript.fune, or fetch it from a terminal with fune pull react.form.button@1.0.1:typescript.

It is React ^19 · TypeScript only, so there is no package for Python or Rust. The full package is one file too: react.form.button-1.0.1.fune, 13,552 bytes, sha256 bae4ac854d06deca5d39c4edc64fb3bc6e78e1cceb029e73b1a3d026d017213d.

// fune: before react.form.button

// fune: after react.form.button

// fune: step react.form.button after <n|label>

More from the author

- **variant**: `primary` (the default, the page's main action), `secondary` (other actions) or `warning`, GOV.UK's red button for an action that destroys something. Other kits call that "danger"; it is `warning` here, as in GOV.UK, and `danger` is not accepted. GOV.UK asks for one primary button per page and very few warning buttons. - **type** is `submit` unless you say `button` or `reset`. It is always written out, so a button inside a form never submits it by surprise. - **name** and **value** are sent with the form when this button submits it, for a form with more than one submit button ("Save" and "Add another"). React writes `value` before `name` in its HTML; the browser does not care. - **disabled** is the real attribute plus `aria-disabled="true"`, as GOV.UK renders it. GOV.UK advises against disabled buttons: they have poor contrast and give no reason. - **loading** is this component's answer to GOV.UK's "Stop users from accidentally sending information more than once". GOV.UK ignores a second click within a second (`data-prevent-double-click`); here the app says when the work is under way. The button stays enabled, so it keeps focus and is still announced, but carries `aria-disabled="true"` and `fune-button--loading`, and a press does nothing: `onClick` is not called and the event's default (submitting the form) is prevented. `loadingText` replaces the children meanwhile. - **onClick** is called with no arguments, never the event. A disabled button never fires it. - **id** is rendered only when you give one: nothing refers to a button by id, so unlike the fields it does not fall back to `useId()`.

It listens for clicks, so it is a client component (`"use client"`). What a press does cannot be rendered on a server; the vectors pin the markup of every state, and the rule for a press (ignored while `loading`) is the four lines in `press`.

Classes: `fune-button`, `fune-button--secondary`, `fune-button--warning`, `fune-button--loading`.

Sources: GOV.UK Design System, "Button" https://design-system.service.gov.uk/components/button/ (default, secondary, warning and disabled buttons, and "Stop users from accidentally sending information more than once").

## Notices

Portions derived from GOV.UK Frontend (https://github.com/alphagov/govuk-frontend), Copyright (c) 2017 Crown Copyright (Government Digital Service), under the MIT License; the full notice is in NOTICE.

1.0.1 adds its attribution notices (NOTICE). The code and the tests are unchanged.

Files