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>

Heading level

The title renders as an h2, one level under the page heading. A reader who moves by heading needs the levels to step down one at a time. Set level when the alert sits inside a section that already holds a heading.

<april:alert level="3">
    <slot:title>Heads up</slot:title>
    <slot:description>Your trial ends on Friday.</slot:description>
</april:alert>

Props

Prop Type Default Description
level integer 2 The heading level the title renders as. Accepts 1 to 6.

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`.