Action button

In FORMA

• Liegt in kit/arc/action-button und ist über @/forma/arc/action-button/action-button erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

• A single async commit such as Save, Publish, or Submit where the result should appear on the button.
• Call-to-action buttons where a trailing arrow invites the next step.
• Flows where the button should reset to idle on its own after success, via resetAfterMs.

When not to use

• Use button with loading for plain form submits that do not need a success state.
• Use action-swap when the control toggles between lasting states.
• Use hold-to-confirm when the action is destructive and needs a deliberate press.

Usage

import { ActionButton } from "@/forma/arc/action-button/action-button";

export function PublishButton() {
  return (
    <ActionButton
      label="Publish"
      pendingLabel="Publishing"
      successLabel="Published"
      onAction={publish}
      onActionError={error => toast.error(String(error))}
    />
  );
}

API reference

ActionButton

A call-to-action button with a trailing arrow that runs an async action and morphs through pending and success.

Keyboard interactions

Accessibility

• Native button; the visible label is aria-hidden and a visually hidden copy of label names it.
• Pending sets aria-busy and aria-disabled instead of disabled, so keyboard focus stays through the save.
• A role="status" region announces the pending and success labels.

Motion

• Changed letters rise from a soft blur while the width springs to fit; the arrow leaves forward and a check draws itself in.
• Presses scale to about 0.97 on a snappy spring.
• Reduced motion drops the press scale, width spring, and stroke draw, and swaps with an instant fade.

Responsive behavior

• Width springs to fit pending and success labels, so keep them close in length inside tight toolbars.
• Hover shadow applies only on hover-capable fine pointers; touch gets the press scale.

Performance

• Every letter is a motion span with layout position animation plus a small blur; fine for a few buttons, not for dense tables.
• A ResizeObserver drives the width spring.

Notes for AI

• Use for a single async commit (save, publish, submit) where the result should show on the button itself.
• Prefer button with loading for plain forms, and action-swap when the control toggles between lasting states.
• Return the real promise from onAction; handle errors in onActionError since the button just resets.

Related

• Button: A clear, responsive action with quiet secondary states.
• Hold to confirm: Confirm a destructive action by holding, not tapping.
• Toast: Brief confirmation for a completed background action.

Also in buttons

• Split button: A primary action with a menu of nearby alternatives.
• Button group: Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.
• Floating button group: Separate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.
• Expanding button group: Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.
• Copy button: Copy a value with immediate confirmation.
• Icon morph: Icons that morph between states: menu to close, play to pause, copy to check, and more.
• Confirm morph: A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.

Guidance for AI tools

Action button: A compact button for frequent toolbar actions. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt