Alert
An in-page notification box that sits right above the related content. Use it for the result of an action, a situation that needs attention or a persistent error; for feedback that lasts a few seconds, Toast is a better fit.
Variants
The color and icon are set by variant; when omitted, info in the palette's Info color (sky) is used. Choose info for general information, success for completed actions, warning for situations that need attention and danger for errors and blocked actions. Each variant shows its own icon automatically.
<div class="space-y-3">
<acun:alert>The October campaign schedule has been published.</acun:alert>
<acun:alert variant="success">Product details updated.</acun:alert>
<acun:alert variant="warning">Deleted records are also listed.</acun:alert>
<acun:alert variant="danger">Nothing was deleted because the customer has 3 open orders.</acun:alert>
</div>| Prop | Values |
|---|---|
variant | primary | secondary | success | danger | warning | info | dark (default info) |
With a title
When title is given, a bold heading line appears at the top and the slot content sits below it as the description. In alerts with more than one sentence or a list, put the gist of the message in the title.
<acun:alert variant="danger" title="The import could not be completed">
<ul class="list-disc space-y-1 ps-4">
<li>Row 12: SKU is missing.</li>
<li>Row 27: category code (ELK-09) not found.</li>
</ul>
</acun:alert>| Prop | Values |
|---|---|
title | Bold heading line; when empty, only the content is shown |
Dismissible
dismissible adds a close button at the top right. The alert is hidden only in the browser; it shows again when the page is reloaded.
<acun:alert variant="warning" dismissible>
4 team members are using an old version of the mobile app.
</acun:alert>| Prop | Values |
|---|---|
dismissible | true | false |
Dismissing with Livewire
dismiss-action takes the name of a Livewire method: the close button hides the alert and also calls this method. The announcement is then marked as read on the server and does not come back when the page is reloaded. When dismiss-action is given, the close button appears even if you do not write dismissible.
@if ($announcement)
<acun:alert title="{{ $announcement->title }}" dismiss-action="dismissAnnouncement">
{{ $announcement->body }}
</acun:alert>
@endif| Prop | Values |
|---|---|
dismiss-action | Name of the Livewire method (e.g. dismissAnnouncement) |
Rich content
The slot accepts free-form HTML: you can add a link, bold text or a small button. The text color comes from the variant; make links stand out with underline.
<acun:alert variant="info" title="A new version is ready">
<p>Version <strong>2.4</strong> of the mobile app supports recording orders offline.</p>
<div class="mt-3 flex flex-wrap items-center gap-3">
<acun:button size="sm">Start the update</acun:button>
<a href="#" class="font-medium underline underline-offset-2 hover:no-underline">Release notes</a>
</div>
</acun:alert>Accessibility note
The component does not add an ARIA role on its own; alerts present when the page loads are read like normal text. For important errors that appear later, after an action, set role="alert" and the screen reader announces the message right away. Extra attributes are passed to the container.
<acun:alert variant="danger" role="alert">Your session has expired. Please sign in again.</acun:alert>| Prop | Values |
|---|---|
role | alert (urgent) | status (informational) |
Title and description parts
When the alert content includes a list, a link or a button, use the acun:alert.title and acun:alert.description parts; the icon, color and close button stay the same.
<acun:alert variant="warning" dismissible>
<acun:alert.title>3 shipments are delayed</acun:alert.title>
<acun:alert.description>
<ul class="list-disc space-y-0.5 ps-4">
<li>Kadıköy warehouse: 2 orders, estimated 1 day delay</li>
<li>Üsküdar warehouse: 1 order, address could not be verified</li>
</ul>
<div class="mt-3 flex flex-wrap gap-2">
<acun:button size="sm" variant="warning">Reschedule the shipment</acun:button>
<acun:button size="sm" variant="white">Call the carrier</acun:button>
</div>
</acun:alert.description>
</acun:alert>
<acun:alert variant="success" class="mt-4">
<acun:alert.title>Campaign published</acun:alert.title>
<acun:alert.description>
The 12-product campaign was emailed to 486 customers.
<a href="#" class="font-medium underline underline-offset-2">View the campaign</a>
</acun:alert.description>
</acun:alert>Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
variant | info | info (sky) · success (emerald) · warning (amber) · danger (red); an unknown value falls back to info |
title | null | Bold heading line |
dismissible | false | Close button; hides the alert only in the browser |
dismiss-action | null | Livewire method called on close; when given, the close button is added as well |