Banner

Displays a temporary message at the top or bottom of an application.

April UI 1.0 is ready to use. A small message can stay out of the way.
Component Code 
<div class="relative w-full overflow-hidden rounded-md border bg-muted/20">
    <april:banner position="none" display-after="0" dismissable>
        <x-slot:body>
            <div class="flex flex-col items-start gap-1 text-sm sm:flex-row sm:items-center sm:justify-between sm:gap-4">
                <span>April UI 1.0 is ready to use.</span>
                <span class="text-muted-foreground">A small message can stay out of the way.</span>
            </div>
        </x-slot:body>
    </april:banner>
</div>

The banner is hidden on first render, then displays after display-after milliseconds. Use the body slot for the message and add dismissable when the user should be able to close it.

<april:banner position="top" display-after="500" dismissable>
    <x-slot:body>
        Your trial ends in three days.
    </x-slot:body>
</april:banner>

Set position="bottom" to anchor the banner to the bottom of the viewport. Set position="none" when the banner belongs inside a contained layout.

Publishing Views

Use the following command to publish this view:

php artisan april:publish banner
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`.