Notifications

Default 
<x-app-ui::notification-group>
    <x-app-ui::notification>
        Account updated

        <x-slot name="details">
            10 min ago
        </x-slot>

        <x-slot name="description">
            Your email address has been changed.
        </x-slot>
    </x-app-ui::notification>

    <x-app-ui::notification>
        User invited

        <x-slot name="details">
            11 min ago
        </x-slot>

        <x-slot name="description">
            You've invited John Doe to your team.
        </x-slot>
    </x-app-ui::notification>
</x-app-ui::notification-group>
Info 
<x-app-ui::notification-group>
    <x-app-ui::notification icon="iconic-information">
        Pending documents

        <x-slot name="description">
            You have pending documents in your inbox.
        </x-slot>
    </x-app-ui::notification>
</x-app-ui::notification-group>
Danger 
<x-app-ui::notification-group>
    <x-app-ui::notification icon="iconic-warning-triangle" color="danger">
        Update failed

        <x-slot name="description">
            Please check the logs for more information.
        </x-slot>
    </x-app-ui::notification>
</x-app-ui::notification-group>
Success 
<x-app-ui::notification-group>
    <x-app-ui::notification icon="iconic-check-circle" color="success">
        Upgraded to pro

        <x-slot name="description">
            You've upgraded your plan to pro.
        </x-slot>
    </x-app-ui::notification>
</x-app-ui::notification-group>
Warning 
<x-app-ui::notification-group>
    <x-app-ui::notification icon="iconic-warning-triangle" color="warning">
        Unauthorized

        <x-slot name="description">
            This page is only available for administrators.
        </x-slot>
    </x-app-ui::notification>
</x-app-ui::notification-group>
With actions 
<x-app-ui::notification-group>
    <x-app-ui::notification icon="iconic-phone">
        John is calling you

        <x-slot name="actions">
            <x-app-ui::link>
                Accept
            </x-app-ui::link>

            <x-app-ui::link color="danger">
                Decline
            </x-app-ui::link>
        </x-slot>
    </x-app-ui::notification>
</x-app-ui::notification-group>

API

app-ui::notification

Attributes

Name Default Options Notes
color primary danger, primary, success, warning
icon Any Blade icon component name

Slots

Name Notes
Main Contains the text content of the notification.
actions Contains action links to display in the footer of the notification. These will typically be app-ui::link components.
description Contains the text content for the notification description.
details Contains the text content for the notification details, typically when it was received.

app-ui::notification-group

Slots

Name Notes
Main Contains the individual app-ui::notification components.