banner · Admiral UI kit

Example

Laravel

<x-admin::stack gap="2">
    <x-admin::banner>Field mappings changed. The next rebuild uses them.</x-admin::banner>
    <x-admin::banner variant="success" dismissible>All connectors passed their last health check.</x-admin::banner>
    <x-admin::banner variant="warning" title="Google Sheets failed 3 runs">Runs retry every 15 minutes.<x-slot:actions><x-admin::button size="sm">View runs</x-admin::button></x-slot:actions></x-admin::banner>
    <x-admin::banner variant="destructive" title="Mailchimp rejected the API key">Generate a new key, then paste it under Connectors.</x-admin::banner>
</x-admin::stack>

Props

Prop	Default	Options
`variant`	`"info"`	info, success, warning, destructive
`title`	`null`
`dismissible`	`false`

Slots: actions

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Banner } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack

<div class="adm-stack" style="gap:var(--ad-space-2)"><div class="adm-banner" role="status">
    <span class="adm-icon-line"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg></span>
    <div class="adm-banner__body">
                <span>Field mappings changed. The next rebuild uses them.</span>    </div>
        </div>
    <div class="adm-banner adm-banner--success" role="status">
    <span class="adm-icon-line"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></span>
    <div class="adm-banner__body">
                <span>All connectors passed their last health check.</span>    </div>
        <button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--xs" data-adm-dismiss aria-label="Dismiss"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>
    <div class="adm-banner adm-banner--warning" role="status">
    <span class="adm-icon-line"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/></svg></span>
    <div class="adm-banner__body">
        <span class="adm-banner__title">Google Sheets failed 3 runs</span>        <span>Runs retry every 15 minutes.</span>    </div>
    <button type="button" class="adm-btn adm-btn--secondary adm-btn--sm" >View runs</button>    </div>
    <div class="adm-banner adm-banner--destructive" role="alert">
    <span class="adm-icon-line"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/></svg></span>
    <div class="adm-banner__body">
        <span class="adm-banner__title">Mailchimp rejected the API key</span>        <span>Generate a new key, then paste it under Connectors.</span>    </div>
        </div></div>