Skip to main content

Alert

Display brief important messages to users like errors or action confirmations

Overview #

Use the alert component to show brief important messages to the user like errors, action confirmations, or system status. Alerts can also be used to highlight form fields with missing or invalid input.

Examples #


<!-- Default -->
<div class="rvt-alert rvt-alert--info" role="alert" aria-labelledby="information-alert-title" data-rvt-alert="info">
<div class="rvt-alert__title" id="information-alert-title">Scheduled System Maintenance</div>
<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 class="rvt-alert__dismiss" data-rvt-alert-close>
<span class="rvt-sr-only">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>

<!-- Success -->
<div class="rvt-alert rvt-alert--success [ rvt-m-top-md ]" role="alert" aria-labelledby="success-alert-title" data-rvt-alert="success">
<div class="rvt-alert__title" id="success-alert-title">Thank you!</div>
<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 class="rvt-alert__dismiss" data-rvt-alert-close>
<span class="rvt-sr-only">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>

<!-- Warning -->
<div class="rvt-alert rvt-alert--warning [ rvt-m-top-md ]" role="alert" aria-labelledby="warning-alert-title" data-rvt-alert="warning">
<div class="rvt-alert__title" id="warning-alert-title">Unsaved Changes</div>
<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 class="rvt-alert__dismiss" data-rvt-alert-close>
<span class="rvt-sr-only">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>

<!-- Error -->
<div class="rvt-alert rvt-alert--danger [ rvt-m-top-md ]" role="alert" aria-labelledby="error-alert-title" data-rvt-alert="error">
<div class="rvt-alert__title" id="error-alert-title">Incorrect User ID or Password</div>
<p class="rvt-alert__message">The user ID and password you entered do not match. Please check your entries and try again.</p>
<button class="rvt-alert__dismiss" data-rvt-alert-close>
<span class="rvt-sr-only">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>
<!-- Default -->
<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="first-name-message">The Description tells users more about this stuff.</span>
</div>

<!-- Success -->
<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="first-name-message">First name is valid!</span>
</div>

<!-- Warning -->
<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="first-name-message">Your Password is weak.</span>
</div>

<!-- Danger -->
<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="first-name-message">The Username you entered is taken.</span>
</div>
<!-- Default -->
<div class="rvt-inline-alert 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="first-name-message">The Description tells users more about this stuff.</span>
</div>

<!-- Success -->
<div class="rvt-inline-alert 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="first-name-message">First name is valid!</span>
</div>

<!-- Warning -->
<div class="rvt-inline-alert 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="first-name-message">Your Password is weak.</span>
</div>

<!-- Danger -->
<div class="rvt-inline-alert 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="first-name-message">The Username you entered is taken.</span>
</div>

Usage #

Do

  • Keep alert text brief
  • Use to confirm that a user has successfully completed a task
  • Use to notify users about errors, warnings, and updates
  • Link an alert's title to a corresponding inline validation alert when multiple errors appear on a form
  • Clearly describe the problem and suggest next steps in the case of an error

Don't

  • Allow users to dismiss error alerts
  • Create error alerts that automatically disappear after a certain amount of time
  • Choose alert colors for purely aesthetic reasons—use the color variant that matches the situation
  • Use when you need to interrupt the user's workflow or get their confirmation—use a modal instead

Accessibility #

  • Move focus to alerts when using server-side rendering. If you are using server-side rendering, such as PHP, use JavaScript to move focus to the first alert on your page after the DOM finishes loading. Otherwise, screen readers might not announce the alert.
  • Defer rendering alerts until after the DOM loads when using client-side rendering. Dynamically rendered alerts are automatically announced by most screen readers, but most screen readers will not inform users of alerts that are rendered before the DOM has finished loading.
  • Associate groups of invalid inputs with inline alerts. When using an inline validation alert with a group of inputs (such as radio buttons), make sure to add the aria-describedby attribute to each input that is invalid. The value of the aria-describedby attribute should match the id of the corresponding element with the .rvt-inline-alert__message CSS class.

JavaScript #

Method Description
dismiss() Dismisses the alert
Event Description Details object properties
rvt:alertDismissed Emitted when an alert is dismissed

Learn more about using Rivet JavaScript