Skip to main content
Rivet Design System Indiana University

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 #


Open in new window
Copy link to example 
<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"/></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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"/></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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"/></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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"/></svg>
  </button>
</div>
Open in new window
Copy link to example 
<!-- Default -->
<div class="rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--info">
  <span class="rvt-inline-alert__icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M9 7v5H7V7h2ZM8 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/>  <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="example-message-1">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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M7 11.414 11.914 6.5 10.5 5.086 7 8.586l-1.5-1.5L4.086 8.5 7 11.414Z"/>  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="example-message-2">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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M12 7H4v2h8V7Z"/>  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="example-message-3">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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m8 6.586-2-2L4.586 6l2 2-2 2L6 11.414l2-2 2 2L11.414 10l-2-2 2-2L10 4.586l-2 2Z"/>  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="example-message-4">The Username you entered is taken.</span>
</div>
Open in new window
Copy link to example 
<!-- Default -->
<div class="rvt-inline-alert rvt-inline-alert--info">
  <span class="rvt-inline-alert__icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M9 7v5H7V7h2ZM8 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/>  <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="example-message-1">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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M7 11.414 11.914 6.5 10.5 5.086 7 8.586l-1.5-1.5L4.086 8.5 7 11.414Z"/>  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="example-message-2">First name is valid!</span>
</div>

<!-- Warning -->
<div class="rvt-inline-alert rvt-inline-alert--warning">
  <span class="rvt-inline-alert__icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M12 7H4v2h8V7Z"/>  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="example-message-3">Your Password is weak.</span>
</div>

<!-- Danger -->
<div class="rvt-inline-alert rvt-inline-alert--danger">
  <span class="rvt-inline-alert__icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m8 6.586-2-2L4.586 6l2 2-2 2L6 11.414l2-2 2 2L11.414 10l-2-2 2-2L10 4.586l-2 2Z"/>  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="example-message-4">The Username you entered is taken.</span>
</div>

Elements #

Element Description Usage Required Multiple
Title Title that appears in bold at the top of an alert Limit to a short phrase that clearly summarizes the alert

Title is optional

Component may contain only one Title
Text Text of the alert Limit to a few short sentences. If possible, provide guidance on how the user can correct the issue.

Text is required

Component may contain only one Text
Dismiss button Button that allows the user to dismiss the alert Do not allow users to dismiss error alerts. Do not use an icon other than the "X" icon provided in the example markup.

Dismiss button is optional

Component may contain only one Dismiss button

Usage #

Do

  • 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 dialog 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 Detail object properties
rvtAlertDismissed Emitted when an alert is dismissed —

Learn more about using Rivet JavaScript