Alert
Displays a callout for user attention.
No JavaScript Required
Heads up!
You can add components to your app using the cli.
Installation
Add the component to your project:
rails generate shadcn:component alertUsage
<%= render Shadcn::AlertComponent.new do |alert| %>
<% alert.with_title { "Heads up!" } %>
<% alert.with_description { "You can add components to your app using the cli." } %>
<% end %>Examples
Default
Note
This is a default alert for general information.
Destructive
Error
Your session has expired. Please log in again.
<%= render Shadcn::AlertComponent.new(variant: :destructive) do |alert| %>
<% alert.with_title { "Error" } %>
<% alert.with_description { "Your session has expired. Please log in again." } %>
<% end %>With Icon
Warning
Your free trial ends in 3 days. Upgrade to continue using all features.
Destructive with Icon
Error
Something went wrong. Please try again later.
Multiple Alerts
Information
Your account has been updated successfully.
Connection Failed
Unable to connect to the server. Check your internet connection.
API Reference
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