Docs

Alert

Attention-grabbing messages for user notifications.

<.alert title="The requested file is ready to download." />

Variants

Use standard, info, success, warning, and error styles to communicate message nature.

<.alert title="Important update: Please read carefully" />
<.alert variant="neutral" title="System maintenance scheduled for tonight" />
<.alert variant="error" title="Critical error. Unable to process request" />
<.alert variant="warning" title="Low disk space. Action required soon" />
<.alert variant="success" title="Payment successfully processed. Thank you!" />
<.alert variant="info" title="New feature available. Check it out!" />

Subtitle

Add a brief subtitle to provide additional clarity about the alert's main message.

<.alert title="Yeeey!" subtitle="Your profile picture has been updated." />

Content

Include complex information or interactive elements within the alert body.

<.alert title="Update Available!">
  <p>A new version of the application is available. Would you like to update now?</p>

  <div class="mt-4 flex space-x-2">
    <.button size="xs">Update Now</.button>
    <.button size="xs" variant="ghost">Remind Me Later</.button>
  </div>
</.alert>

Icon

Customize the alert's appearance by replacing or hiding icons to convey purpose.

<.alert title="Bitcoin price alert: Significant market movement">
  <:icon>
    <.icon name="hero-currency-dollar" class="size-5 text-amber-500" />
  </:icon>
</.alert>

<.alert hide_icon title="Bitcoin price alert: Significant market movement" />

Actions

Add actionable elements like buttons or links for users to respond to alerts.

<.alert
  title="The requested file is ready to download."
  on_close={JS.show(to: "#alert-closed-message")}
/>