Flag
Messages that provide low-priority updates about a process or event.
Flags provide contextual, low priority messages to the user. They’re primarily used for success messages or alerts that require minimal actions, if any, from the user.
Also known as: Toast message, snack bar, notification, banner.
Anatomy
A. Icon (required): Visual indicator communicating the urgency of the flag.
B. Title (optional): Brief text summarizing the purpose of the flag.
C. Message (required): Descriptive message detailing important contextual information.
D. Close icon button (optional): Icon button used as a close button alternative that allows users to manually dismiss the flag.
E. Button and link (optional): Text button or link that prompts an action or directs users to relevant resources.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Informational | For low-priority feedback or status updates that don’t require user action or attention. | For neutral messages that are important enough to disrupt the users workflow but may not require action before continuing. Use a Dialog instead. For low-priority, system-level messages. Use a Banner instead. For low-priority information contextually relevant to a section of a page or workflow. Use a Section message instead. |
| Success | For system- or section-level success, including on-page event confirmations. This is the most frequent use case. | If the user is taken to a success page on submit. Don’t use a messaging component in this case. |
| Warning | For low-priority warnings that don’t require user action or attention. | For medium to high-priority warnings that must be fixed or acknowledged before continuing. Use a Dialog instead. For medium-priority, system-level messages that require attention but not disruption. Use a Banner instead. For medium- or high-priority warnings contextually relevant to a section of a page or workflow. Use a Section message instead. |
| Error | Error flags are not a common use case. | For high-priority errors that must be fixed before continuing. Use a Dialog instead. For high priority, system-level errors that require attention. Use a Banner instead. For high-priority errors contextually relevant to a section of a page or workflow. Use a Section message instead. |
Best practices
- Limit the use of flags, as overusing can desensitize users and reduce the value.
- Visit Button to learn about best practices for alignment, order, and language for calls to action.
- Visit Feedback and status to learn how to use messaging components, understand their level of disruption, and choose the appropriate messaging component for your context.
Do Place flags in a consistent area, usually in the bottom corner.
Don't Extend flags across the entire width of the page.
Do Stack flags in order of urgency with higher-priority messages appearing first.
Don't Require users to dismiss messages one at a time before receiving the next one.
Do Float flags over page content and let users scroll to access blocked content.
Don't Block important interactive elements like navigation controls or buttons.
Behaviors
Dismissal
In general, users should be allowed to dismiss flags using a close icon button or text button. Flags should also dismiss when users navigate to a new page or complete an associated action, such as correcting an error. Avoid using timed auto-dismissal for flags, as they may disappear before screen readers finish announcing the text.
Do Use either a close button or a close icon button, and implement them consistently across your experience.
Don't Combine close buttons with close icons or alternate between them in your experience.
Animation
Flags may use animated graphics. They appear by sliding onto the screen from the nearest edge (top, bottom, left, or right).
- Ensure animations are brief, subtle, and unobtrusive.
- Implement animations consistently across flags in your experience, either animating all or none.
Content
- Learn how to craft content for messaging components, like flags, visit Messaging.
- Follow guidelines for Link and Button components when labeling actions and destinations within flags.
Platform considerations
Mobile
Flags are available in both mobile and web and should be implemented similarly across both platforms.
- Extend mobile flags across the screen width to ensure they’re large enough to read.
- Place mobile flags consistently at the top or bottom of the screen without covering interactive elements.
Do Use buttons or links to dismiss mobile flags.
Don't Only use a close icon in mobile flags.
