Alert

Displays a callout for user attention.

Component Code
<april:alert>
<slot:icon>
<x-lucide-terminal class="h-4 w-4" />
</slot:icon>
<slot:title>Heads up!</slot:title>
<slot:description>
You can add components to your app using the cli.
</slot:description>
</april:alert>

Destructive

Component Code
<april:alert variant="destructive">
<slot:icon>
<x-lucide-terminal class="h-4 w-4" />
</slot:icon>
<slot:title>Heads up!</slot:title>
<slot:description>
You can add components to your app using the cli.
</slot:description>
</april:alert>

Dismissable alert

The alert component supports being dismissed (ie the alert can be hidden when the close button is pressed).

Component Code
<april:alert dismissable>
<slot:icon>
<x-lucide-terminal class="h-4 w-4" />
</slot:icon>
<slot:title>Heads up!</slot:title>
<slot:description>
You can add components to your app using the cli.
</slot:description>
</april:alert>

Dismiss On Timeout

Additionally, an alert can be dismissed after a timeout

Component Code
<april:alert dismissOnTimeout timeout="5000">
<slot:icon>
<x-lucide-terminal class="h-4 w-4" />
</slot:icon>
<slot:title>Heads up!</slot:title>
<slot:description>
You can add components to your app using the cli.
</slot:description>
</april:alert>

You could also decide to start the timeout on intersect

Component Code
<april:alert dismissOnTimeout startTimeoutOnIntersect timeout="5000">
<slot:icon>
<x-lucide-terminal class="h-4 w-4" />
</slot:icon>
<slot:title>Heads up!</slot:title>
<slot:description>
You can add components to your app using the cli.
</slot:description>
</april:alert>

Publishing Views

Use the following command to publish this view:

php artisan april:publish alert
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run:
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.