UX Recipe

Retry Button UX Patterns

Designing retry interactions that reduce user frustration and increase task completion.

1. Inline Retry

Place the retry button directly where the failed content would render. This preserves spatial context and avoids disorienting the user. Pair it with a concise failure reason and a clear call to action.

!

Failed to load transactions

2. Toast + Action

For background operations that fail silently, surface a toast notification with an embedded retry action. Keep the toast dismissible and auto-expire after 8 seconds.

Sync failed — network error

3. Progressive Retry

After the first manual retry fails, escalate the UI. Show a countdown timer with automatic retry, and offer a “Retry now” override. This communicates that the system is handling the problem while keeping the user in control.

Retrying automatically in 12s

4. Full-Page Retry

When an entire page fails to hydrate, render a minimal branded error state. Include a prominent retry button and a secondary link to a status page or support channel.

Something went wrong

We couldn't load this page. Check your connection or try again.

View system status →