Alert
A callout that highlights an important inline message.
Installation
Included in poetry-ui — available as
poetry_alert
the moment you've installed Poetry,
with no per-component step. To own the source and edit it, copy it into your app:
bin/rails g poetry:add alert
Default
Open Default standalone
Heads up
You can adjust preferences at any time.
<%= poetry_alert(class: "w-full max-w-xl") do |alert| %>
<% alert.with_title { "Heads up" } %>
You can adjust preferences at any time.
<% end %>
Action
Open Action standalone
Dark mode is now available
Enable it under your profile settings to get started.
<%# The action corner (with_action) holding a call-to-action - upstream's
alert-action demo verbatim. %>
<%= poetry_alert(class: "w-full max-w-md") do |alert| %>
<% alert.with_title { "Dark mode is now available" } %>
<% alert.with_action do %>
<%= poetry_button(size: :xs) { "Enable" } %>
<% end %>
Enable it under your profile settings to get started.
<% end %>
Custom colors
Open Custom colors standalone
Scheduled maintenance
The dashboard will be read only on Sunday from 2 to 4 AM while we upgrade the database.
<%= poetry_alert(class: "w-full max-w-xl border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100") do |alert| %>
<% alert.with_icon(name: :"triangle-alert") %>
<% alert.with_title { "Scheduled maintenance" } %>
The dashboard will be read only on Sunday from 2 to 4 AM while we upgrade the database.
<% end %>
Destructive
Open Destructive standalone
Payment failed
Your card was declined - update your billing details.
<%= poetry_alert(variant: :destructive, class: "w-full max-w-xl") do |alert| %>
<% alert.with_icon(name: :"triangle-alert") %>
<% alert.with_title { "Payment failed" } %>
Your card was declined - update your billing details.
<% end %>
Dismissible
Open Dismissible standalone
Changes saved
Your profile updates are live.
<%# The action corner holds the dismiss control (with_action). The
docs-only harness removes the alert; in an app the same click is
element.remove() or a Turbo Stream remove. %>
<div data-controller="demo-dismiss" class="w-full max-w-md">
<%= poetry_alert do |alert| %>
<% alert.with_icon(name: :"circle-check") %>
<% alert.with_title { "Changes saved" } %>
<% alert.with_action do %>
<%= poetry_button(variant: :ghost, size: :"icon-xs", label: "Dismiss",
data: { action: "click->demo-dismiss#dismiss" }) do %>
<%= poetry_icon(name: :x) %>
<% end %>
<% end %>
Your profile updates are live.
<% end %>
</div>
With action
Open With action standalone
Storage almost full
You have used 92% of your workspace. Clear old files or upgrade to keep syncing.
<%= poetry_alert(class: "w-full max-w-xl") do |alert| %>
<% alert.with_icon(name: :"circle-alert") %>
<% alert.with_title { "Storage almost full" } %>
You have used 92% of your workspace. Clear old files or upgrade to keep syncing.
<div class="mt-3">
<%= poetry_button(size: :sm, variant: :outline) { "Manage storage" } %>
</div>
<% end %>
With icon
Open With icon standalone
Profile verified
Your identity check is complete and every account feature is now unlocked.
<%= poetry_alert(class: "w-full max-w-xl") do |alert| %>
<% alert.with_icon(name: :"badge-check") %>
<% alert.with_title { "Profile verified" } %>
Your identity check is complete and every account feature is now unlocked.
<% end %>
API
Poetry::Ui::Alert::Component — options are
constructor keywords (the poetry_* helper forwards them);
slots are composed inside the block. Generated from the gem's source documentation.
| Option | Type | Details | Description |
|---|---|---|---|
| variant: | Symbol | one of: default, destructive; defaults to :default |
The intent axis; :destructive marks errors and announces assertively. |
Slots
| Writer | Description |
|---|---|
| with_action | Optional corner action (a dismiss button or link), pinned to the top-right. |
| with_icon | Optional leading icon; pass icon props (e.g. name: :\"triangle-alert\"), not a block. |
| with_title | The heading line of the callout. |
Styling
Every part carries a stable data-slot attribute — target
[data-slot=…] from your own CSS to restyle it. State rides
data attributes on the parts below. This contract is verified against rendered DOM in CI.
| Part | Description |
|---|---|
| [data-slot=alert] | The callout root - role rides the variant (destructive announces assertively via role=alert; default is a polite role=status) |
| [data-slot=alert-title] | The heading line, rendered when the title slot is set |
| [data-slot=alert-action] | The corner action well (with_action) - a dismiss or link pinned to the top-right by the theme |
| [data-slot=alert-description] | The body copy - the content block renders here |
State attributes
| Part | Attribute | Condition | Values |
|---|---|---|---|
| alert | data-variant | always - the resolved variant | default · destructive |