Alert
Displays a callout for user attention.
Heads up!
You can add components to your app using the cli.
Component Code
<april:alert>
<slot:icon>
<i class="fa-solid fa-terminal h-4 w-4"></i>
</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
Heads up!
You can add components to your app using the cli.
Component Code
<april:alert variant="destructive">
<slot:icon>
<i class="fa-solid fa-terminal h-4 w-4"></i>
</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).
Heads up!
You can add components to your app using the cli.
Component Code
<april:alert dismissable>
<slot:icon>
<i class="fa-solid fa-terminal h-4 w-4"></i>
</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
Heads up!
You can add components to your app using the cli.
Component Code
<april:alert dismissOnTimeout timeout="5000">
<slot:icon>
<i class="fa-solid fa-terminal h-4 w-4"></i>
</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
Heads up!
You can add components to your app using the cli.
Component Code
<april:alert dismissOnTimeout startTimeoutOnIntersect timeout="5000">
<slot:icon>
<i class="fa-solid fa-terminal h-4 w-4"></i>
</slot:icon>
<slot:title>Heads up!</slot:title>
<slot:description>
You can add components to your app using the cli.
</slot:description>
</april:alert>