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-shape-icon ro-size-sm ro-color-scheme-inverted" aria-label="Close">
          <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

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

ProceedCancel

Advanced Padding

Add .ro-alert-advanced for increased padding. On viewports ≤767px, padding reverts to the default compact spacing.

<div class="ro-alert ro-alert-advanced">
  <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">Advanced padding</p>
    </div>
    <p class="ro-alert-body">Use when the alert needs more breathing room on desktop.</p>
  </div>
</div>

Preview

Advanced padding

Use when the alert needs more breathing room on desktop.

---

Deprecated Variants

The following color schemes are no longer shipped in @ringover/styles (deprecated since v3.3.0):

• product
• info

Use success, warning, or danger instead. See the Migration guide.

Properties

Class	Default	Description
.ro-alert		Root container. Neutral scheme when no color class is set.
.ro-alert-advanced	(none)	Increased padding; reverts on mobile (≤767px).
.ro-alert-icon		Icon slot (.ro-icon, svg, or img).
.ro-alert-content		Main column layout.
.ro-alert-header		Title row; may include .ro-alert-actions.
.ro-alert-title		Bold title text.
.ro-alert-body		Message body (semantic slot; no dedicated styles).
.ro-alert-footer		Action button row below the body.
.ro-alert-actions		Inline actions in the header (e.g. close button).
.ro-color-scheme-success	(neutral)	Success theme.
.ro-color-scheme-warning		Warning theme.
.ro-color-scheme-danger		Danger theme.

For dismiss buttons, use a ghost icon .ro-btn — see Close Button.