Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add announcement-banner

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::announcement-banner> sits above the header and can be dismissed.

Basic Usage

Aura UI 3.23 is out. See what changed 

<x-aura::announcement-banner icon="sparkles" href="#" link-text="See what changed">
    Aura UI 3.23 is out.
</x-aura::announcement-banner>
<x-aura::announcement-banner storage-key="v3-23" href="/changelog" link-text="See what changed">
    Aura UI 3.23 is out.
</x-aura::announcement-banner>

Variants

Primary

Success

Warning

Danger

Dark 

<div class="space-y-2">
    <x-aura::announcement-banner :dismissible="false">Primary</x-aura::announcement-banner>
    <x-aura::announcement-banner variant="success" :dismissible="false">Success</x-aura::announcement-banner>
    <x-aura::announcement-banner variant="warning" :dismissible="false">Warning</x-aura::announcement-banner>
    <x-aura::announcement-banner variant="danger" :dismissible="false">Danger</x-aura::announcement-banner>
    <x-aura::announcement-banner variant="dark" :dismissible="false">Dark</x-aura::announcement-banner>
</div>

Props

Prop Type Default Description
variant string 'primary' primary, success, warning, danger, dark.
dismissible bool true Shows the close button.
storageKey string|null null Remembers the dismissal under this key.
href string|null null Adds a link after the text. Sanitised.
linkText string|null null Defaults to the translated "Learn more".
icon string|null null Icon before the text.
label string|null null Names the region. Defaults to the translated "Announcement".

Dismissal is only remembered with a key

Without storageKey the banner returns on the next page load. That is deliberate: a banner that disappears for good after one mis-click, with no way to bring it back, is worse than one that comes back. Give it a key when you mean it, and change the key when the message changes.

Accessibility

  • Not role="alert". An alert cuts across whatever a screen reader is saying. That is right for something that just went wrong and wrong for a line that was on the page before it loaded. This is a labelled region, so it can be found and skipped.
  • The dismiss button is icon-only and carries a name.
  • Every variant is a -700 shade with white on it, which clears 4.5:1. The pale -50 backgrounds used elsewhere would not.