Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add notification-center

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::notification-center> is the bell in the corner of an application shell: a trigger carrying an unread badge, and a panel listing recent notifications. Each entry is a <x-aura::notification-center.item>.

Basic Usage

Order ORD-KO55AG18 paid Dr. Erling Conn — Pro plan — €149.00 3 hours ago
Order ORD-NH29YA69 refunded 6 days ago 
<div class="flex justify-center py-4">
    <x-aura::notification-center :count="2">
        <x-aura::notification-center.item
            title="Order ORD-KO55AG18 paid"
            description="Dr. Erling Conn — Pro plan — €149.00"
            time="3 hours ago"
        />
        <x-aura::notification-center.item
            title="Order ORD-NH29YA69 refunded"
            time="6 days ago"
            color="warning"
            read
        />
    </x-aura::notification-center>
</div>
<x-aura::notification-center :count="$unread">
    @foreach ($notifications as $notification)
        <x-aura::notification-center.item
            :title="$notification->title"
            :description="$notification->body"
            :time="$notification->created_at->diffForHumans()"
            :read="$notification->read_at !== null"
            :url="$notification->url"
        />
    @endforeach
</x-aura::notification-center>

Props

Prop Type Default Description
count int 0 Unread count on the badge. 0 hides the badge.
position string 'bottom-end' Where the panel opens relative to the trigger.
maxHeight string '24rem' Height at which the list starts scrolling.

Item

Prop Type Default Description
title string '' The headline.
description string|null null Supporting line.
time string|null null Relative time, already formatted.
read bool false Dims the entry and drops the unread dot.
icon string 'heroicon-o-bell' Icon for the entry.
color string 'primary' Accent for the icon: any Aura semantic colour.
url string|null null Makes the entry a link.

Empty state

With no items the panel is empty rather than absent — say so, instead of showing a blank box:

<x-aura::notification-center :count="0">
    @forelse ($notifications as $notification)
        <x-aura::notification-center.item :title="$notification->title" />
    @empty
        <x-aura::empty-state title="You're all caught up" />
    @endforelse
</x-aura::notification-center>

Notes

count is what you tell the user is unread — keep it consistent with the items marked read, or the badge will disagree with the list.