Alerts
Feedback indicators that direct the attention of the user to a change in the state of the application.
Examples & Guidelines
Banners communicate one of the following states: success, information, warning, or error.
Success Alert
Success Alert
Additional information or directions go here. Brevity is the soul of wit, however, text may wrap to another line in the off chance that we want the user hooked on phonics.
Informational Alert
Informational Alert
Additional information or directions go here. We may decide this particular information is very important and remove the option to close it. If users can’t get rid of it, maybe they’ll read it.
Warning Alert
Warning Alert
An explanation of the warning goes here.
Error Alert
Error Alert
An explanation of the error goes here. This should be the scariest looking banner — but not too scary. Maybe we’ll choose to add a button on this banner.
Placement
Banners show at the top of the page or section they apply to on top of (z-wise) other content on the page. Try to avoid covering critical content / actions.
Content & Timing
Titles and text should be concise. Errors and warnings should be actionable if applicable. Let the user know how to remedy the situation. Some banners may be dismissable and/or have additional buttons or in-line links for secondary actions. Banners will time out after 2 seconds or until they are dismissed (optional via “x”). There is no need to have duplicate close actions.