On this page

Patterns

Consider the context and use case when you choose an appropriate pattern for communicating a message to users.

A brief message that provides information or instructs users to take a specific action.
Displays one or more page-level flash notifications to communicate the status of a user’s action, such as success, failed, and so on.
A compact, looped animation giving the user feedback that a process is currently running.
Informs the user about the progress of an operation with a known duration.

Criteria

AlertFlashbarSpinnerProgress bar
ContextPlace in context of the page or element that requires the user's attention. For example, at the top of a dashboard or next to an input field in a form.Place after a create flow or at the top of the page.Place in context of the element that was used to initiate the action.Place in context on the page or in a flash message.
Based on user actionNoYesYesYes
Determinate or indeterminate-Determinate or indeterminateDeterminate or indeterminateDeterminate
How long is the action?--1-10 seconds10 or more seconds

Context

The context informs where the pattern is located in the user interface and when it appears.

  • Alerts are contextual. Place alerts in the context of a particular element or section.

    • For example, place an alert next to an input field in a form to inform the user about the cost of a choice.

  • For progress bars, the context is determined by whether the task is contextual (for example, starting a child process) or global (for example, setting up the parent resource).

    • If the task is contextual, place a progress bar in the context of a page.

    • If the task is global, place a progress bar in a flash message.

User action

Some patterns are in response to user actions. Others capture the user’s attention without an action.

  • For user-initiated actions, use a flashbar message to communicate the outcome of that action and also to give the next step.

  • To bring extra attention to something on the page, use an alert. Alerts don’t show success or errors based on a user action.

Determinate or indeterminate

Use a progress bar for operations with a determinate duration (for example: 5 minutes), or duration that can be calculated based on available data (for example: file upload speed). If the operation duration isn’t quantifiable, use a spinner instead.

Feedback duration

There are three main time limits (which are determined by human perceptual abilities) to keep in mind when optimizing web and application performance. (Research from Nielsen Norman Group )

Less than 1 second

  • Don't display any type of feedback.

  • Block the user from doing anything else until the operation completes.

1–10 seconds

  • Display a spinner to provide feedback about the operation in progress.

  • For compact layouts, place the spinner inside the button component.

  • Block the user from doing anything else until the operation completes.

Longer than 10 seconds
10 seconds is approximately the limit for keeping the user's attention focused. For longer delays, users will want to perform other tasks while waiting for the operation to complete. We recommend giving feedback indicating when the operation is expected to be complete.

  • Show a progress bar.

  • Allow the user to perform other tasks (such as navigate to other pages) while the operation is in progress.