Alert

Displays a callout for user attention.

No JavaScript Required

Heads up!

You can add components to your app using the cli.

alert/default

<%= render Shadcn::Alert.new do |alert| %>
  <% alert.with_title { "Heads up!" } %>
  <% alert.with_description { "You can add components to your app using the cli." } %>
<% end %>

Installation

Add the component to your project:

rails generate shadcn:add alert

Usage

<%= render Shadcn::Alert.new do |alert| %>
  <% alert.with_title { "Heads up!" } %>
  <% alert.with_description { "You can add components to your app using the cli." } %>
<% end %>

Examples

Default

Heads up!

You can add components to your app using the cli.

alert/default

<%= render Shadcn::Alert.new do |alert| %>
  <% alert.with_title { "Heads up!" } %>
  <% alert.with_description { "You can add components to your app using the cli." } %>
<% end %>

<%= render Shadcn::Alert.new do |alert| %>
  <% alert.with_title { "Heads up!" } %>
  <% alert.with_description { "You can add components to your app using the cli." } %>
<% end %>

Destructive

Error

Your session has expired. Please log in again.

alert/destructive

<%= render Shadcn::Alert.new(variant: :destructive) do |alert| %>
  <% alert.with_title { "Error" } %>
  <% alert.with_description { "Your session has expired. Please log in again." } %>
<% end %>

<%= render Shadcn::Alert.new(variant: :destructive) do |alert| %>
  <% alert.with_title { "Error" } %>
  <% alert.with_description { "Your session has expired. Please log in again." } %>
<% end %>

With Icon

Information

This is an informational message about an important update.

alert/with_icon

<%= render Shadcn::Alert.new do |alert| %>
  <% alert.with_icon do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10" />
      <path d="M12 16v-4" />
      <path d="M12 8h.01" />
    </svg>
  <% end %>
  <% alert.with_title { "Information" } %>
  <% alert.with_description { "This is an informational message about an important update." } %>
<% end %>

<%= render Shadcn::Alert.new do |alert| %>
  <% alert.with_icon do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10" />
      <path d="M12 16v-4" />
      <path d="M12 8h.01" />
    </svg>
  <% end %>
  <% alert.with_title { "Information" } %>
  <% alert.with_description { "This is an informational message about an important update." } %>
<% end %>

Success

Your changes have been saved successfully.

alert/success

<%= render Shadcn::Alert.new(class_name: "border-green-500/50 text-green-700 [&>svg]:text-green-700") do |alert| %>
  <% alert.with_icon do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20 6 9 17l-5-5" />
    </svg>
  <% end %>
  <% alert.with_title { "Success" } %>
  <% alert.with_description { "Your changes have been saved successfully." } %>
<% end %>

<%= render Shadcn::Alert.new(class_name: "border-green-500/50 text-green-700 [&>svg]:text-green-700") do |alert| %>
  <% alert.with_icon do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20 6 9 17l-5-5" />
    </svg>
  <% end %>
  <% alert.with_title { "Success" } %>
  <% alert.with_description { "Your changes have been saved successfully." } %>
<% end %>

Multiple Alerts

Information

Your account has been updated successfully.

Connection Failed

Unable to connect to the server. Check your internet connection.

<div class="space-y-4 w-full">
  <%= render Shadcn::Alert.new do |alert| %>
    <% alert.with_icon do %>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
    <% end %>
    <% alert.with_title { "Information" } %>
    <% alert.with_description { "Your account has been updated successfully." } %>
  <% end %>

  <%= render Shadcn::Alert.new(variant: :destructive) do |alert| %>
    <% alert.with_icon do %>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
    <% end %>
    <% alert.with_title { "Connection Failed" } %>
    <% alert.with_description { "Unable to connect to the server. Check your internet connection." } %>
  <% end %>
</div>

API Reference

Prop	Type	Default	Description
variant	`Symbol`	`:default`	Alert style variant (:default, :destructive)
class_name	`String`	`nil`	Additional CSS classes to apply

Slots

Slot	Description
with_icon	Optional icon displayed on the left
with_title	Alert title (bold heading)
with_description	Alert description text

Accessibility

Uses role="alert" for proper screen reader announcement
Icons are decorative and should not require alt text
Color is not the only indicator - icons and text provide context

On This Page

Installation Usage Examples API Reference