Ready
Added in 1.0.0
Alerts
Alerts are used to display brief important messages to users. They are designed to attract the user’s attention, but not interrupt their work.
Migrating to Rivet 2
Page-level alerts
Scheduled System Maintenance
Thank you!
Unsaved Changes
Incorrect User ID or Password
<div class="rvt-alert rvt-alert--info rvt-m-bottom-md" role="alertdialog" aria-labelledby="information-alert-title">
<h1 class="rvt-alert__title" id="information-alert-title">Scheduled System Maintenance</h1>
<p class="rvt-alert__message">This system will be unavailable on August 1st due to scheduled system maintenance. Please check back on August 2nd.</p>
<button type="button" class="rvt-alert__dismiss" data-alert-close>
<span class="v-hide">Dismiss this alert</span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M9.41,8l5.29-5.29a1,1,0,0,0-1.41-1.41L8,6.59,2.71,1.29A1,1,0,0,0,1.29,2.71L6.59,8,1.29,13.29a1,1,0,1,0,1.41,1.41L8,9.41l5.29,5.29a1,1,0,0,0,1.41-1.41Z"/>
</svg>
</button>
</div>
<div class="rvt-alert rvt-alert--success rvt-m-bottom-md" role="alertdialog" aria-labelledby="success-alert-title">
<h1 class="rvt-alert__title" id="success-alert-title">Thank you!</h1>
<p class="rvt-alert__message">We have received your application. Check your email in a few weeks to find out if you’ve been admitted.</p>
<button type="button" class="rvt-alert__dismiss" data-alert-close>
<span class="v-hide">Dismiss this alert</span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M9.41,8l5.29-5.29a1,1,0,0,0-1.41-1.41L8,6.59,2.71,1.29A1,1,0,0,0,1.29,2.71L6.59,8,1.29,13.29a1,1,0,1,0,1.41,1.41L8,9.41l5.29,5.29a1,1,0,0,0,1.41-1.41Z"/>
</svg>
</button>
</div>
<div class="rvt-alert rvt-alert--warning rvt-m-bottom-md" role="alertdialog" aria-labelledby="warning-alert-title">
<h1 class="rvt-alert__title" id="warning-alert-title">Unsaved Changes</h1>
<p class="rvt-alert__message">Your changes have not been saved. To save your changes, click ‘Save my changes’ or click ‘Cancel’ to exit without saving.</p>
<button type="button" class="rvt-alert__dismiss" data-alert-close>
<span class="v-hide">Dismiss this alert</span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M9.41,8l5.29-5.29a1,1,0,0,0-1.41-1.41L8,6.59,2.71,1.29A1,1,0,0,0,1.29,2.71L6.59,8,1.29,13.29a1,1,0,1,0,1.41,1.41L8,9.41l5.29,5.29a1,1,0,0,0,1.41-1.41Z"/>
</svg>
</button>
</div>
<div class="rvt-alert rvt-alert--danger" role="alert" aria-labelledby="error-alert-title">
<h1 class="rvt-alert__title" id="danger-alert-title">Incorrect User ID or Password</h1>
<p class="rvt-alert__message">The user ID and password you entered do not match. Please check your entries and try again. <a href="#">Forgot your user ID or password?</a></p>
</div>
Deprecated page-level alert class names
Version 1.1.0 of Rivet updated the CSS class names used by page-level alerts to be consistent with class names used by other components. The table below shows the deprecated class names and their replacements.
The deprecated class names will still work in version 1.1.0. However, they will be removed in a future release.
Standalone inline alerts
Inline alerts in Rivet should be used for form validation situations where the standard inline form input validation error would not make sense. For instance, marking a group of radio buttons or checkboxes will give an input error. Adding the rvt-inline-alert--standalone modifier class to the standard inline alert element will give the alert a subtle background color and left border to add some visual contrast.
<div class="rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--info">
<span class="rvt-inline-alert__icon">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="currentColor">
<path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Z"/>
<path d="M8,12a1,1,0,0,1-1-1V8A1,1,0,0,1,9,8v3A1,1,0,0,1,8,12Z"/>
<circle cx="8" cy="5" r="1"/>
</g>
</svg>
</span>
<span class="rvt-inline-alert__message" id="radio-list-message-1">
This field is required to continue.
</span>
</div>
<div class="rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--success">
<span class="rvt-inline-alert__icon">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="currentColor">
<path d="M10.2,5.4,7.1,9.53,5.67,8.25a1,1,0,1,0-1.34,1.5l2.05,1.82a1.29,1.29,0,0,0,.83.32h.12a1.23,1.23,0,0,0,.88-.49L11.8,6.6a1,1,0,1,0-1.6-1.2Z"/>
<path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z"/>
</g>
</svg>
</span>
<span class="rvt-inline-alert__message" id="radio-list-message-2">
This field is required to continue.
</span>
</div>
<div class="rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--warning">
<span class="rvt-inline-alert__icon">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="currentColor">
<path d="M11,9H5A1,1,0,0,1,5,7h6a1,1,0,0,1,0,2Z"/>
<path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Z"/>
</g>
</svg>
</span>
<span class="rvt-inline-alert__message" id="radio-list-message-3">
This field is required to continue.
</span>
</div>
<div class="rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--danger">
<span class="rvt-inline-alert__icon">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="currentColor">
<path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z" />
<path d="M10.83,5.17a1,1,0,0,0-1.41,0L8,6.59,6.59,5.17A1,1,0,0,0,5.17,6.59L6.59,8,5.17,9.41a1,1,0,1,0,1.41,1.41L8,9.41l1.41,1.41a1,1,0,0,0,1.41-1.41L9.41,8l1.41-1.41A1,1,0,0,0,10.83,5.17Z"/>
</g>
</svg>
</span>
<span class="rvt-inline-alert__message" id="radio-list-message-4">
This field is required to continue.
</span>
</div>
More form validation tips
When using a standalone inline alert with a group of inputs, make sure to add the aria-describedby attribute to each input (in this case radio buttons) that is invalid. The aria-describedby by value should correspond to a matching id attribute on the .rvt-inline-alert__message element.
<form>
<fieldset>
<legend class="rvt-ts-23 rvt-text-bold rvt-m-bottom-sm">Radio list</legend>
<ul class="rvt-plain-list">
<li>
<input type="radio" name="radio-demo-2" id="radio-3" aria-describedby="radio-list-message">
<label for="radio-3">Option one</label>
</li>
<li>
<input type="radio" name="radio-demo-2" id="radio-4" aria-describedby="radio-list-message">
<label for="radio-4">Option two</label>
</li>
<li>
<input type="radio" name="radio-demo-2" id="radio-4-disabled" aria-describedby="radio-list-message">
<label for="radio-4-disabled">Option three disabled</label>
</li>
<li>
<input type="radio" name="radio-demo-2" id="radio-5" aria-describedby="radio-list-message">
<label for="radio-5">Option four checked and disabled</label>
</li>
</ul>
<div class="rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--danger">
<span class="rvt-inline-alert__icon">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="currentColor">
<path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z" />
<path d="M10.83,5.17a1,1,0,0,0-1.41,0L8,6.59,6.59,5.17A1,1,0,0,0,5.17,6.59L6.59,8,5.17,9.41a1,1,0,1,0,1.41,1.41L8,9.41l1.41,1.41a1,1,0,0,0,1.41-1.41L9.41,8l1.41-1.41A1,1,0,0,0,10.83,5.17Z"/>
</g>
</svg>
</span>
<span class="rvt-inline-alert__message" id="radio-list-message">
This field is required to continue.
</span>
</div>
</fieldset>
</form>
Deprecated standalone inline alert class names
Version 1.1.0 of Rivet updated the CSS class names used by standalone inline alerts to be consistent with class names used by other components. The table below shows the deprecated class names and their replacements.
The deprecated class names will still work in version 1.1.0. However, they will be removed in a future release.
Alert lists
Alert lists provide a way to group a set of errors together. For instance, when summarizing a list of errors on a long form.
-
Please correct the following errors.
-
Errors can have a title only, with a link to the invalid element.
-
Error message three is soooo long!
<ul class="rvt-alert-list">
<li class="rvt-alert-list__item">
<div class="rvt-alert rvt-alert--danger" role="alert">
<h1 class="rvt-alert__title">Please correct the following errors.</h1>
<p class="rvt-alert__message">Alert lists are useful for summarizing multiple errors on a page.</p>
</div>
</li>
<li class="rvt-alert-list__item">
<div class="rvt-alert rvt-alert--danger" role="alert">
<h1 class="rvt-alert__title">Errors can have a title only, <a href="#">with a link</a> to the invalid element.</h1>
</div>
</li>
<li class="rvt-alert-list__item">
<div class="rvt-alert rvt-alert--danger" role="alert">
<h1 class="rvt-alert__title">Error message three is soooo long!</h1>
<p class="rvt-alert__message">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias veniam iste, nesciunt aliquam illum quaerat hic expedita ducimus error assumenda explicabo quos harum delectus deserunt, autem corrupti quas doloremque. Veritatis.</p>
</div>
</li>
</ul>
When to use
- To notify users about system status including error, warnings, and updates.
- To notify users they’ve successfully completed a task
- Use along with inline validation alerts to summarize multiple errors on longer forms
When to use something else
- When it’s necessary to interrupt the user’s work flow.
- When user input/action is required to continue working
- If action taken by the user will result in losing/destroying their work, use a modal dialog that allows the user to confirm the destructive action.
Accessibility
- Alerts should use the
role="alert"attribute - Alerts that have a dismiss or close button should use the
role="alertdialog"attribute - Use the
aria-labelledbyattribute to link the alert title with the alert element - Dynamically rendered alerts are automatically announced by most screen readers, but it’s important to note that screen readers will not inform users of alerts that are present before a page has finished loading
Alert list accessibility
Alert lists can be particularly useful for summarizing multiple errors on a page, and providing links to the invalid fields. These summaries are especially helpful for non-sighted users, who will not receive the visual cue provided by multiple inline alerts appearing on the page when a form is submitted.
Microcopy notes
- Alert title should be clear and concise. “Success!” rather than “Application was submitted successfully!"
- Alert message should be descriptive and should clearly articulate the problem the user has encountered or the information you are trying to convey to the user. “The user ID and password you entered do not match” is more clear than “Unauthorized”.
- Where appropriate, alert title should be a link to the position on the page where the invalid element can be found.
- Alert message should offer next steps where appropriate.
Good example:
Scheduled System Maintenance This system will be unavailable on August 1st due to scheduled system maintenance. Please check back on August 2nd.
- Clear title; explains that maintenance was scheduled and expected
- Informs the user of the length of the outage
- Lets the user know when the system is expected to be available
Bad example:
System is Down The system is currently unavailable.
- Doesn’t indicate that maintenance was scheduled and expected
- Doesn’t inform the user how long the system will be unavailable
- Doesn’t let the user know when the system is expected to be available again
See the content guide section for additional information.
Implementation
- Page-level alerts can be used with an optional dismiss button (X icon), however it’s important to avoid allowing users to dismiss alerts that are used to display error messages. Do allow users to dismiss alerts wherever appropriate.
- Avoid using error messages that automatically disappear. If a user doesn’t have time to read the error message they may not know how to correct the problem once it has been automatically removed.
- Write helpful alert messages. For errors, Include a brief description of the problem and how to fix it. Check out the Voice and tone/microcopy section for more information.
JavaScript API
The Rivet alert component comes with a couple of methods you can use to programmatically control alerts. The init() method is called by default when rivet.js is loaded. Alerts are dismissed when clicking a button element within the alert with the data-alert-close attribute. You can also dismiss an alert by calling the Alert.dismiss() method in your own script.
Alert dismissal class deprecation
In previous versions of Rivet, alerts were dismissed by clicking a button element within the alert with the .rvt-alert__dismiss class.
In an effort to decouple CSS classes from JavaScript behavior, the .rvt-alert__dismiss class has been deprecated in favor of the data-alert-close attribute. The examples on this page have been updated to reflect this new approach.
We recommend updating your application to use the latest version of the alert.
Available methods
| Method | Description |
|---|---|
Alert.init(context)
|
|
Alert.destroy(context)
|
|
Alert.dismiss(id, callback)
|
|
On this page