Azalea
Azalea

FormMessage

The result of an action, next to the control that triggered it.

Why it exists

Seven of these were hand-rolled across the services as a bare <span className="text-xs text-red-600"> after a button. This is that, with the part everyone forgot: role="status" and aria-live, so the outcome is announced rather than only seen.

That run is executing right now.Approved.Last checked 2 minutes ago.

Guidance

Use it when

  • The outcome of a specific button, rendered beside it.
  • Messages that say what to do next, not just what failed.

Reach for something else when

  • Page-level state — that is Alert.
  • A field validation error — that is Field's `error`, which is bound to the input.

Accessibility

aria-live="polite", not assertive: the user just pressed the button, so they are already looking here. An assertive announcement would talk over their own screen reader mid-sentence.