Alerts

An alert displays a short, important message in a way that attracts the user’s attention without interrupting their task. It’s often used for system messages, warnings, or success notifications. 📢

Examples

Basic Alert

Use the .ro-alert class as a container. The main components are the .ro-alert-icon, and the .ro-alert-content which contains the header, body, and footer.

<div class="ro-alert">
<i class="ro-alert-icon ro-icon ro-icon-bubble-duo-chat"></i>
<div class="ro-alert-content">
  <div class="ro-alert-header">
    <p class="ro-alert-title">Default Alert</p>
  </div>
  <p class="ro-alert-body">
    Alert banner is a powerful communication tool used to display important messages.
  </p>
</div>
</div>

Preview

Default Alert

Alert banner is a powerful communication tool used to display important messages.

Color Schemes

Use color scheme classes like .ro-color-scheme-success to indicate the nature of the message. The actively supported schemes are success, warning, and danger.

<div class="ro-alert ro-color-scheme-success">
  <i class="ro-alert-icon ro-icon ro-icon-bubble-duo-chat"></i>
  <div class="ro-alert-content">
    <div class="ro-alert-header">
        <p class="ro-alert-title">This is a success alert</p>
    </div>
    <p class="ro-alert-body">This message communicates a success status.</p>
  </div>
</div>

<div class="ro-alert ro-color-scheme-warning">
  <i class="ro-alert-icon ro-icon ro-icon-bubble-duo-chat"></i>
  <div class="ro-alert-content">
    <div class="ro-alert-header">
        <p class="ro-alert-title">This is a warning alert</p>
    </div>
    <p class="ro-alert-body">This message communicates a warning status.</p>
  </div>
</div>

<div class="ro-alert ro-color-scheme-danger">
  <i class="ro-alert-icon ro-icon ro-icon-bubble-duo-chat"></i>
  <div class="ro-alert-content">
    <div class="ro-alert-header">
        <p class="ro-alert-title">This is a danger alert</p>
    </div>
    <p class="ro-alert-body">This message communicates a danger status.</p>
  </div>
</div>

Preview

This is a success alert

This message communicates a success status.

This is a warning alert

This message communicates a warning status.

This is a danger alert

This message communicates a danger status.

Full Alert with Actions

You can include actions in the .ro-alert-actions container within the header, and add primary/secondary actions in the .ro-alert-footer.

<div class="ro-alert ro-color-scheme-warning">
<i class="ro-alert-icon ro-icon ro-icon-alert-triangle"></i>
<div class="ro-alert-content">
  <div class="ro-alert-header">
    <p class="ro-alert-title">A choice needs to be made</p>
    <div class="ro-alert-actions">
      <button class="ro-btn ro-variant-ghost ro-color-scheme-inverted ro-size-sm">Show</button>
      <button class="ro-btn ro-variant-ghost ro-color-scheme-inverted ro-size-sm">
        <i class="ro-icon ro-icon-x-small"></i>
      </button>
    </div>
  </div>
  <p class="ro-alert-body">
    This action is irreversible. Please proceed with caution as this may result in data loss.
  </p>
  <div class="ro-alert-footer">
    <button class="ro-btn ro-color-scheme-inverted">Proceed</button>
    <button class="ro-btn ro-variant-outlined ro-color-scheme-inverted">Cancel</button>
  </div>
</div>
</div>

Preview

A choice needs to be made

Show

This action is irreversible. Please proceed with caution as this may result in data loss.

ProceedCancel

---

Deprecated Variants

The following variants are no longer supported in the active stylesheets:

• product
• info

Properties

Alert variants are controlled via utility classes.

Class	Default	Description
.ro-color-scheme-*	(neutral scheme)	Applies a color theme. Options: success, warning, danger.