HomeAppsModulesGems

Alerts

Provide contextual feedback messages for typical user actions with flexible alert messages.

On this page

Variants#

All available alert variants including primary, secondary, and status colors.

This is an informational alert.
Your action was successful!
Please be careful with this action.
Something went wrong.
<%= info_alert "This is an informational alert." %>
<%= success_alert "Your action was successful!" %>
<%= warning_alert "Please be careful with this action." %>
<%= danger_alert "Something went wrong." %>

Icon#

Alerts can include icons for better visual communication.

This alert includes an icon for better visual communication.
Your changes have been saved successfully!
This action cannot be undone.
Failed to process your request.
<%= info_alert "This alert includes an icon for better visual communication.", icon: "info" %>
<%= success_alert "Your changes have been saved successfully!", icon: "circle-check" %>
<%= warning_alert "This action cannot be undone.", icon: "triangle-alert" %>
<%= danger_alert "Failed to process your request.", icon: "circle-question-mark" %>

Dismissible#

Alerts can be dismissible with a close button.

This alert can be dismissed.
This alert can be dismissed. 
<%= info_alert "This alert can be dismissed.", dismissible: true %>
<%= success_alert dismissible: true do |a| %>
  <% a.with_close_button "Dismiss" %>
  This alert can be dismissed.
<% end %>

HTML Content#

Alerts can contain rich HTML content including links, lists, and formatting.

Did you know?

You can include links, bold text, italic text, and other HTML elements in alerts.

Important Notice

Before proceeding, please ensure:

  • All required fields are completed
  • You have reviewed the terms and conditions
  • Your changes have been saved
Account Created Successfully!

Your account has been created. Check your email for a verification link. Resend email

Critical System Error

The following issues were detected:

  • Database connection timeout
  • Background job queue is not processing
  • Cache server is unresponsive
<%= info_alert icon: "info", dismissible: true do %>
  <strong>Did you know?</strong>
  <p class="mt-1 mb-0">
    You can include <a href="#" class="underline">links</a>, <strong>bold text</strong>,
    <em>italic text</em>, and other HTML elements in alerts.
  </p>
<% end %>

<%= warning_alert icon: "triangle-alert" do %>
  <strong>Important Notice</strong>
  <p class="mt-1 mb-1">Before proceeding, please ensure:</p>
  <ul class="list-disc ml-5 mb-0">
    <li>All required fields are completed</li>
    <li>You have reviewed the terms and conditions</li>
    <li>Your changes have been saved</li>
  </ul>
<% end %>

<%= success_alert dismissible: true do %>
  <div>
    <strong>Account Created Successfully!</strong>
    <p class="mt-1 mb-0">
      Your account has been created. Check your email for a verification link.
      <a href="#" class="underline font-semibold">Resend email</a>
    </p>
  </div>
<% end %>

<%= danger_alert do %>
  <strong>Critical System Error</strong>
  <p class="mt-1 mb-1">The following issues were detected:</p>
  <ul class="list-disc ml-5 mb-0">
    <li>Database connection timeout</li>
    <li>Background job queue is not processing</li>
    <li>Cache server is unresponsive</li>
  </ul>
<% end %>