Flash

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.

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.

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).