Submit Failure Retry Banner

ProNew

When saving fails the form keeps every value, shows a banner that says what happened and offers Retry, tells a network failure from a rejection, and keeps focus where it was. Use this when losing typed input to a failed request is not acceptable.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A long form posts to a flaky or slow service and the person must be able to try again without retyping.

Do not use it when: Do not use a banner for field-level problems; show those next to the field. Use this for the problem with the request itself.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`save`	`(values) => Promise<void>`	Throw `RejectedError` for a refusal. Any other error counts as a network or server failure and offers Retry.

Accessibility

The banner is an Alert with role="alert", so it is announced as soon as it appears; focus is left where it was, so the person can keep editing or press Retry.
Retry exists only for failures that a retry can fix. A refusal explains itself and waits for a change.
While saving, the button is disabled and relabelled; the success message is a polite status.

Testing

The pattern ships with a Testing Library test (submit-failure-retry-banner.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.