Heads up!
You can add components to your app using the CLI.
Usage
<%= ui.alert title: "Heads up!" %>
<%= ui.alert variant: :success do %>
<%= ui.alert_icon "check-circle" %>
<%= ui.alert_title "Success!" %>
<%= ui.alert_description "Your changes have been saved." %>
<% end %>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | nil | Alert title text. Can also use `alert_title` slot for more control. |
variant | Symbol:default | :info | :error | :success | :warning | :default | Visual style of the alert. |
Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.
SubcomponentsUse subcomponents below or any HTML.
| Name | Helper | Description |
|---|---|---|
alert_title | ui.alert_title | Styled title element. Use instead of `title` prop for complex content. |
alert_description | ui.alert_description | Secondary text with muted styling. |
alert_icon | ui.alert_icon | Icon displayed at the start of the alert. Inherits from `Ui::Icon::Component`. |
Examples
Default
Default alert!
<%= ui.alert title: "Default alert!" %>Variants
Info alert!
Warning alert!
Danger alert!
Success alert!
<div class="flex flex-col gap-2">
<%= ui.alert title: "Info alert!", variant: :info %>
<%= ui.alert title: "Warning alert!", variant: :warning %>
<%= ui.alert title: "Danger alert!", variant: :error %>
<%= ui.alert title: "Success alert!", variant: :success %>
</div>With description
Success!
Your changes have been saved.
<%= ui.alert variant: :success do %>
<%= ui.alert_title "Success!" %>
<%= ui.alert_description "Your changes have been saved." %>
<% end %>With icon
Heads up!
Describe what can be done about it here.
<%= ui.alert variant: :info do %>
<%= ui.alert_icon "information-circle", size: 5, class: "text-blue-500" %>
<%= ui.alert_title "Heads up!" %>
<%= ui.alert_description "Describe what can be done about it here." %>
<% end %>