Alert Components
Alert components inform users of important information through contextual messages.
<div class="c-alert c-alert--info" role="alert">
<svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m10.32 6.874c0-.48.154-.891.48-1.2.326-.308.72-.48 1.2-.48s.891.155 1.2.48c.309.326.48.72.48 1.2s-.154.892-.48 1.2c-.3163741.32328455-.7477148.50840159-1.2.515-.48 0-.891-.189-1.2-.515-.3200568-.31575007-.4940066-.75062456-.48-1.2zm2.863 3.96c-.343-.325-.72-.514-1.183-.531h-1.714c-.463.034-.823.223-1.183.531-.3224942.3115081-.51295382.7350301-.532 1.183h1.715v5.143c.034.463.188.857.531 1.183.343.343.72.531 1.183.531h1.714c.463 0 .823-.188 1.183-.531.343-.326.514-.72.532-1.183h-1.715v-5.16.017c-.0298897-.4451313-.2182721-.8648231-.531-1.183zm-1.183-8.571c-5.383 0-9.771 4.354-9.771 9.737s4.388 9.771 9.771 9.771 9.771-4.371 9.771-9.771-4.388-9.754-9.771-9.754zm0-2.263c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.349-12-12 5.383-12 12-12z" fill="#1496da" fill-rule="nonzero" transform="translate(3 3)"/><circle cx="15" cy="15" opacity=".295573" r="12" stroke="#91d5ff" stroke-width="5"/></g></svg> <h2>Alert Components</h2>
<p>Alert components inform users of important information through contextual messages.</p>
</div>
While a message is required, alert headings are recommended but not required. However, when a header is not used, messages appear very similar.
Headings are not required
<div class="c-alert c-alert--info" role="alert">
<svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m10.32 6.874c0-.48.154-.891.48-1.2.326-.308.72-.48 1.2-.48s.891.155 1.2.48c.309.326.48.72.48 1.2s-.154.892-.48 1.2c-.3163741.32328455-.7477148.50840159-1.2.515-.48 0-.891-.189-1.2-.515-.3200568-.31575007-.4940066-.75062456-.48-1.2zm2.863 3.96c-.343-.325-.72-.514-1.183-.531h-1.714c-.463.034-.823.223-1.183.531-.3224942.3115081-.51295382.7350301-.532 1.183h1.715v5.143c.034.463.188.857.531 1.183.343.343.72.531 1.183.531h1.714c.463 0 .823-.188 1.183-.531.343-.326.514-.72.532-1.183h-1.715v-5.16.017c-.0298897-.4451313-.2182721-.8648231-.531-1.183zm-1.183-8.571c-5.383 0-9.771 4.354-9.771 9.737s4.388 9.771 9.771 9.771 9.771-4.371 9.771-9.771-4.388-9.754-9.771-9.754zm0-2.263c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.349-12-12 5.383-12 12-12z" fill="#1496da" fill-rule="nonzero" transform="translate(3 3)"/><circle cx="15" cy="15" opacity=".295573" r="12" stroke="#91d5ff" stroke-width="5"/></g></svg> <p>Headings are not required</p>
</div>
Dismissible Alert Component
To make each Alert dismissible, add the button code below.
<div class="c-alert c-alert--info" role="alert">
<svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m10.32 6.874c0-.48.154-.891.48-1.2.326-.308.72-.48 1.2-.48s.891.155 1.2.48c.309.326.48.72.48 1.2s-.154.892-.48 1.2c-.3163741.32328455-.7477148.50840159-1.2.515-.48 0-.891-.189-1.2-.515-.3200568-.31575007-.4940066-.75062456-.48-1.2zm2.863 3.96c-.343-.325-.72-.514-1.183-.531h-1.714c-.463.034-.823.223-1.183.531-.3224942.3115081-.51295382.7350301-.532 1.183h1.715v5.143c.034.463.188.857.531 1.183.343.343.72.531 1.183.531h1.714c.463 0 .823-.188 1.183-.531.343-.326.514-.72.532-1.183h-1.715v-5.16.017c-.0298897-.4451313-.2182721-.8648231-.531-1.183zm-1.183-8.571c-5.383 0-9.771 4.354-9.771 9.737s4.388 9.771 9.771 9.771 9.771-4.371 9.771-9.771-4.388-9.754-9.771-9.754zm0-2.263c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.349-12-12 5.383-12 12-12z" fill="#1496da" fill-rule="nonzero" transform="translate(3 3)"/><circle cx="15" cy="15" opacity=".295573" r="12" stroke="#91d5ff" stroke-width="5"/></g></svg> <h2>Dismissible Alert Component</h2>
<p>To make each Alert dismissible, add the button code below.</p>
<button aria-label="Close alert" type="button" data-close>
<span class="u-icon" aria-hidden="true">
<svg aria-hidden="true" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.396 12L24 20.604 20.604 24 12 15.396 3.396 24 0 20.604 8.604 12 0 3.396 3.396 0 12 8.604 20.604 0 24 3.396z"/></svg>
</span>
</button>
</div>
There are four different contextual alerts:
- Error alerts
- Information alerts
- Success alerts
- Warning alerts
Error alert
Reserved for errors, malfunctions, as well as critical issues campus safety issues.
Error Alert
An error alert is reserved for errors, malfunctions, as well as critical issues campus safety issues.
<div class="c-alert c-alert--error" role="alert">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M13.339 1.75a1.54 1.54 0 0 0-1.33-.75c-.551 0-1.055.285-1.33.75L.206 19.749a1.47 1.47 0 0 0 0 1.502c.29.465.795.751 1.33.751h20.946c.55 0 1.056-.285 1.315-.75.265-.465.27-1.033.015-1.503L13.34 1.75zm.2 17.246H10.48v-3.005h3.059v3.005zm0-4.506H10.48V8.48h3.059v6.01z"/></svg>
<h2>Error Alert</h2>
<p>An error alert is reserved <a href="#">for errors, malfunctions</a>, as well as critical issues campus safety issues.</p>
<button aria-label="Close alert" type="button" data-close>
<span class="u-icon" aria-hidden="true">
<svg aria-hidden="true" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.396 12L24 20.604 20.604 24 12 15.396 3.396 24 0 20.604 8.604 12 0 3.396 3.396 0 12 8.604 20.604 0 24 3.396z"/></svg>
</span>
</button>
</div>
Information alert
Used to highlight informational content. Use when standard tags such as <b> and <strong> or headers don't pull the message out enough. Try and avoid overusing this alert in lieu of standard content.
Information alert
Used to highlight informational content.
<div class="c-alert c-alert--info" role="alert">
<svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m10.32 6.874c0-.48.154-.891.48-1.2.326-.308.72-.48 1.2-.48s.891.155 1.2.48c.309.326.48.72.48 1.2s-.154.892-.48 1.2c-.3163741.32328455-.7477148.50840159-1.2.515-.48 0-.891-.189-1.2-.515-.3200568-.31575007-.4940066-.75062456-.48-1.2zm2.863 3.96c-.343-.325-.72-.514-1.183-.531h-1.714c-.463.034-.823.223-1.183.531-.3224942.3115081-.51295382.7350301-.532 1.183h1.715v5.143c.034.463.188.857.531 1.183.343.343.72.531 1.183.531h1.714c.463 0 .823-.188 1.183-.531.343-.326.514-.72.532-1.183h-1.715v-5.16.017c-.0298897-.4451313-.2182721-.8648231-.531-1.183zm-1.183-8.571c-5.383 0-9.771 4.354-9.771 9.737s4.388 9.771 9.771 9.771 9.771-4.371 9.771-9.771-4.388-9.754-9.771-9.754zm0-2.263c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.349-12-12 5.383-12 12-12z" fill="#1496da" fill-rule="nonzero" transform="translate(3 3)"/><circle cx="15" cy="15" opacity=".295573" r="12" stroke="#91d5ff" stroke-width="5"/></g></svg> <h2>Information alert</h2>
<p>Used to highlight informational content.</p>
</div>
Success alert
Provide a success message after an action has been taken.
Upload success
Your document was uploaded successfully.
<div class="c-alert c-alert--success" role="alert">
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M23.503 10.598l-1.62-2.01a2.25 2.25 0 0 1-.463-1.155l-.285-2.547A2.265 2.265 0 0 0 19.14 2.89l-2.548-.285c-.45-.045-.84-.239-1.17-.494L13.416.494a2.256 2.256 0 0 0-2.817 0l-2.01 1.62a2.25 2.25 0 0 1-1.155.465l-2.547.285a2.264 2.264 0 0 0-1.995 1.993l-.285 2.549c-.045.45-.238.84-.493 1.17L.494 10.58a2.256 2.256 0 0 0 0 2.817l1.62 2.01c.255.33.42.72.465 1.155l.285 2.547a2.264 2.264 0 0 0 1.993 1.995l2.549.285c.45.045.84.238 1.17.493l2.008 1.62a2.255 2.255 0 0 0 2.817 0l2.01-1.62c.33-.255.72-.42 1.155-.465l2.547-.285a2.264 2.264 0 0 0 1.995-1.993l.285-2.549c.045-.45.238-.84.493-1.17l1.62-2.008a2.256 2.256 0 0 0 0-2.817l-.003.002zM9.758 18L4.51 12.756l2.25-2.25 2.997 3 7.495-7.495L19.5 8.334l-9.743 9.667z" /></svg>
<h2>Upload success</h2>
<p>Your document was uploaded successfully.</p>
<button aria-label="Close alert" type="button" data-close>
<span class="u-icon" aria-hidden="true">
<svg aria-hidden="true" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.396 12L24 20.604 20.604 24 12 15.396 3.396 24 0 20.604 8.604 12 0 3.396 3.396 0 12 8.604 20.604 0 24 3.396z"/></svg>
</span>
</button>
</div>
Warning alert
Used for messages that need the user attention and acknowledgment but might not cause errors. For example:
Outdoor event
Regardless of weather, this event will be held outdoors. Please dress appropriately.
<div class="c-alert c-alert--warning" role="alert">
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" fill="#000" r="10"/><path d="M13.824 17.538H10V14.67h3.824zm0-4.301H10V5.07h3.824z" fill="#fff"/></g></svg>
<h2>Outdoor event</h2>
<p>Regardless of weather, this event will be held outdoors. Please dress appropriately.</p>
</div>
Found in
Alerts are currently used in the following blocks:
Usage guidelines
Avoid
TODO ADD A DROP SHADOW WHEN DISMISSIBLE - maybe?
https://sparkdesignsystem.com/patterns/components/alerts
References
- https://designsystem.digital.gov/components/alert/
- https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4
Should fill the width of the viewport. The content should be kept short and concise. role="alert" is required so that assistive technology can inform users their attention is needed. The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("alert-info-1", "alert-info-2", "alert-info-3", etc).
orm assistive technologies of a time-sensitive and important message. If the message is interactive, use the use the ARIA role="alertdialog" instead.