Pending Button States

Standardized rules for submit/async action buttons across all forms.

Component

src/components/PendingButton.tsx — use this instead of a raw <button> for any form submission or async action.

<PendingButton
  type="submit"
  pending={loading}
  pendingLabel="Saving..."
  className="..."
>
  Save
</PendingButton>

Prop	Type	Description
`pending`	`boolean`	Whether the async action is in progress
`pendingLabel`	`string`	Label shown while pending (e.g. "Signing in...")
`children`	`ReactNode`	Idle label
`disabled`	`boolean`	Additional disabled condition (e.g. form invalid)
`...rest`	`ButtonHTMLAttributes`	All standard button attributes

Spinner placement — inline, left of label. SVG-based, sized 1em so it scales with font size.
No layout shift — min-width: max-content on .pending-btn keeps the button width stable between idle and pending states.
Disabled while pending — disabled and aria-busy="true" are set automatically when pending={true}. This prevents double-submission.
Label change — the visible label changes to pendingLabel during submission. Screen readers announce the change via the button's accessible name.
Reduced motion — the spinner animation is disabled via @media (prefers-reduced-motion: reduce).