Flash
Flash alert informs users of successful or pending actions.
On this page
On this page
Usage
Flash alerts are used to display updates or alerts pertaining to any part of the system; this includes information regarding the user's account, the organization, the repo, and more.
These updates are typically not user-initiated but rather alerts that require the user's attention. Similarly to toasts, flash alerts can convey a warning, error, success, or a neutral message. If additional context is needed, provide a link for the user to learn more.
Best practices
Use flash alerts sparingly and only when necessary. Flash alerts can disrupt the user experience and should only be used when and where relevant.
Though flash alerts don't need to be as concise as a typical Toast message, they should be direct and not exceed two to three sentences. Don't use headings or multiple type sizes in flash alerts, rely on the default paragraph size instead.
Don't show more than one flash alert at a time. For more information, see this article on alert fatigue.
They do not typically timeout on their own, but can include a dismiss action for messages that can be closed.
Don't rely on just color to convey the meaning of the flash alert. You should pair a message with an icon that clearly relates to the selected variant.
Options
Types
There are four types of flash banners, each with their own styles: Default, Warning, Danger, and Success.
Full-width
Full-width can be applied when attaching a banner to a container. It attaches only to the top of a container.
Accessories and actions
Banners contain options to add an icon, button, or dismiss button to the content of the alert.
Icon usage
Icons can help convey what the flash alert is for visually. It should be used alongside a message that further explains what the flash alert is aiming to indicate. You should never rely on just the color of the flash alert to convey a status, as this becomes a WCAG 1.4.1 Use of Color issue.
Accessibility
The flash component should trigger notifications for users utilizing assistive technology. They should be considered as part of the overall messaging in the product and do not recieve focus (therefore, they do not require a dismiss button).