• Use info view when you want the user to perform an action or remain in some sort of transitionary screen state.
• Alter button styling if prioritization/hierarchy is required – no need to stick with default link/ghost buttons.

• Don’t use Info view interchangeably with the What’s New component, if you just need to briefly/temporarily inform the user while still allowing them to navigate away or back then stick with What’s New.

A. Navigation Bar

A default contrast navigation bar without any actions— doesn’t use a stacked modal to highlight the difference between the What’s New component.

B. Title

Use a clear and concise title to provide users the information you are trying to communicate.

C. Description

Explain your information in a summarized form.

D. Progress Indicator

• Spinner: The spinner is used to show the progress of the state of the screen.
• Label: Optional, be concise when describing the action to be done – limit to three words.

E. Button Stack

Uses button form cells, the top button is designated as primary and the bottom as secondary.

Progress Indicator (Spinner)

This indicates that the state of the screen is in progress, the spinner continues to rotate until the system or application is ready to transition.

Action Buttons

The actions in the button stack are emphasized and should allow the user to navigate from or alter the application state.