MutationStatus
<MutationStatus> is the same state machine as ActionButton, without the button. Use to surface the result of an action next to an existing trigger — e.g. [Test voice button] [✓ Played].
When to use
- Inline status next to a “Test”, “Reload”, or “Regenerate” button.
- Right-of-toolbar status indicator.
- Anywhere you’d otherwise hand-roll
<span>{loading ? '…' : ''}</span>.
Don’t use MutationStatus for: the trigger itself (use ActionButton), persistent inline messages (Alert), or transient feedback after a navigation (Sonner).
States
Name is taken.
<MutationStatus mutation={mutation} successText="Saved" />API
| Prop | Type | Default | Description |
|---|---|---|---|
mutation * | { status, error } | — | Same shape as ActionButton — works with react-query / SWR / TanStack Query. |
successText | string | "Saved" | Label rendered next to the ✓ on success. |
successTimeout | number | 3000 | Ms before success disappears. 0 = sticky. |
formatError | (err: unknown) => string | — | Override the default error-message formatter. |
className | string | — | Forwarded. |
Design guidelines
✓ Do
- Set successText="" when the visual ✓ is enough — don't restate "Saved" if the user just clicked Save.
- Render alongside the trigger, not below — the user's eye is already on the button.
✗ Don't
- Use MutationStatus when ActionButton fits — the button is a more focused affordance for the trigger itself.
- Show error inline if the form has FormError above. Pick one.
Accessibility
- Pending:
role="status" aria-live="polite". - Success / error: announced once via the same live region.
Related
ActionButton— Same state machine, on the trigger itself.Sonner— Transient toast feedback.