Alert

<x-alert> renders a contextual alert box with an icon, optional title and description, and an optional dismiss button. Pick a semantic type and it chooses a matching colour and default icon for you.

Usage

<x-alert type="info">
    {{ __('This post has unsaved changes.') }}
</x-alert>

The body can be a slot (as above) or the title / description attributes. Combine title with either one to show a bold heading above the body.

Options

• type — semantic variant: success (default), error, warning, or info. Sets the colour and the default icon.
• title — heading text. On its own it's the alert body; with a description or slot content it becomes a bold title above that body.
• description — secondary text shown below the title. Takes priority over the slot.
• icon — override the default icon. Pass :icon="false" to show no icon.
• dismissible — add a close button so the user can dismiss the alert.

Examples

Alert wrapping a list, with no icon

<x-alert type="info" :icon="false">
    <ul class="m-0">
        <li>{{ __(':count post(s) need to be published.', ['count' => $count]) }}</li>
    </ul>
</x-alert>

Titled alert with a description

<x-alert type="success" :title="__('Saved')" :description="__('Your changes have been stored.')" />

Titled alert with slot content

<x-alert type="warning" :title="__('Heads up')">
    {{ __('Publishing will notify all subscribers.') }}
</x-alert>

Dismissible alert from a flash message

<x-alert :type="$status" :dismissible="true">
    {{ session($status) }}
</x-alert>

Related

• Status — renders dismissible alerts straight from flash data.
• Icon — used for the alert icon.