Notification Center
A notification center composed from unread and all-notification views, lists, avatars, badges, timestamps, toast actions and an all-read empty state.
Notification views
Separate unread work from the complete history without changing the structure of each notification. Keep the sender, event, status and timestamp together; relative times remain concise visually, while the accessible label provides the exact date and time.
Workspace updates
3 unread- Alex MorganNew commentCommented on the quarterly planning document.
- Morgan LeeInvitationInvited you to join the Design systems team.
- BillingAction neededThe payment method for your workspace expires this month.
- Alex MorganNew commentCommented on the quarterly planning document.
- Morgan LeeInvitationInvited you to join the Design systems team.
- BillingAction neededThe payment method for your workspace expires this month.
- Deployment serviceCompletedVersion 0.85.2 was deployed to production.
<section aria-labelledby="notification-center-heading">
<div class="d-flex align-items-center flex-wrap gap-2 py-3 mb-3">
<span class="d-flex align-items-center rounded bg-primary bg-opacity-10 text-primary p-2">
<i class="icon icon-md" aria-hidden="true"><!-- notification icon --></i>
</span>
<h3 class="h4 mb-0" id="notification-center-heading">Workspace updates</h3>
<span class="badge bg-primary">3 unread</span>
<button class="btn btn-text btn-primary ms-auto" type="button" data-toast="All notifications marked as read">
<span>Mark all as read</span>
</button>
</div>
<div class="tab-container shadow-sm rounded">
<div class="tabs" role="tablist" aria-label="Notification views">
<button id="notification-center-unread-tab" class="tab is-active" data-tab="notification-center-unread" type="button" role="tab" aria-selected="true" aria-controls="notification-center-unread" tabindex="0">
<span>Unread</span><span class="badge bg-primary ms-1">3</span>
</button>
<button id="notification-center-all-tab" class="tab" data-tab="notification-center-all" type="button" role="tab" aria-selected="false" aria-controls="notification-center-all" tabindex="-1">
All notifications
</button>
</div>
<div class="tab-contents">
<div id="notification-center-unread" class="tab-content is-active" role="tabpanel" aria-labelledby="notification-center-unread-tab" tabindex="0">
<ul class="list list-flush" aria-label="Unread workspace notifications">
<li class="list-item bg-primary bg-opacity-10 flex-column flex-sm-row align-items-stretch align-items-sm-start py-3">
<div class="d-flex align-items-start gap-3 flex-fill min-w-0">
<span class="avatar avatar-sm bg-primary" aria-hidden="true">AM</span>
<span class="list-item-text min-w-0"><span class="d-flex align-items-center flex-wrap gap-2"><strong>Alex Morgan</strong><span class="badge bg-primary">New comment</span></span><span>Commented on the quarterly planning document.</span><small class="text-muted"><time datetime="2026-09-07T09:42:00+02:00" aria-label="September 7, 2026 at 09:42">5 minutes ago</time></small></span>
</div>
<button class="btn btn-text btn-primary flex-shrink-0 ms-auto" type="button" data-toast="Comment notification marked as read"><span>Mark as read</span></button>
</li>
<li class="list-item bg-primary bg-opacity-10 flex-column flex-sm-row align-items-stretch align-items-sm-start py-3">
<div class="d-flex align-items-start gap-3 flex-fill min-w-0">
<span class="avatar avatar-sm bg-secondary" aria-hidden="true">ML</span>
<span class="list-item-text min-w-0"><span class="d-flex align-items-center flex-wrap gap-2"><strong>Morgan Lee</strong><span class="badge bg-warning">Invitation</span></span><span>Invited you to join the Design systems team.</span><small class="text-muted"><time datetime="2026-09-07T08:30:00+02:00" aria-label="September 7, 2026 at 08:30">1 hour ago</time></small></span>
</div>
<button class="btn btn-text btn-primary flex-shrink-0 ms-auto" type="button" data-toast="Team invitation opened"><span>Review invite</span></button>
</li>
<li class="list-item bg-primary bg-opacity-10 flex-column flex-sm-row align-items-stretch align-items-sm-start py-3">
<div class="d-flex align-items-start gap-3 flex-fill min-w-0">
<span class="avatar avatar-sm avatar-square bg-warning" aria-hidden="true">BI</span>
<span class="list-item-text min-w-0"><span class="d-flex align-items-center flex-wrap gap-2"><strong>Billing</strong><span class="badge bg-error">Action needed</span></span><span>The payment method for your workspace expires this month.</span><small class="text-muted"><time datetime="2026-09-06T16:15:00+02:00" aria-label="September 6, 2026 at 16:15">Yesterday</time></small></span>
</div>
<button class="btn btn-text btn-error flex-shrink-0 ms-auto" type="button" data-toast="Billing settings opened"><span>Update billing</span></button>
</li>
</ul>
</div>
<div id="notification-center-all" class="tab-content" role="tabpanel" aria-labelledby="notification-center-all-tab" tabindex="0" hidden>
<ul class="list list-flush" aria-label="All workspace notifications">
<li class="list-item bg-primary bg-opacity-10 flex-column flex-sm-row align-items-stretch align-items-sm-start py-3">
<div class="d-flex align-items-start gap-3 flex-fill min-w-0">
<span class="avatar avatar-sm bg-primary" aria-hidden="true">AM</span>
<span class="list-item-text min-w-0"><span class="d-flex align-items-center flex-wrap gap-2"><strong>Alex Morgan</strong><span class="badge bg-primary">New comment</span></span><span>Commented on the quarterly planning document.</span><small class="text-muted"><time datetime="2026-09-07T09:42:00+02:00" aria-label="September 7, 2026 at 09:42">5 minutes ago</time></small></span>
</div>
<button class="btn btn-text btn-primary flex-shrink-0 ms-auto" type="button" data-toast="Comment notification marked as read"><span>Mark as read</span></button>
</li>
<li class="list-item bg-primary bg-opacity-10 flex-column flex-sm-row align-items-stretch align-items-sm-start py-3">
<div class="d-flex align-items-start gap-3 flex-fill min-w-0">
<span class="avatar avatar-sm bg-secondary" aria-hidden="true">ML</span>
<span class="list-item-text min-w-0"><span class="d-flex align-items-center flex-wrap gap-2"><strong>Morgan Lee</strong><span class="badge bg-warning">Invitation</span></span><span>Invited you to join the Design systems team.</span><small class="text-muted"><time datetime="2026-09-07T08:30:00+02:00" aria-label="September 7, 2026 at 08:30">1 hour ago</time></small></span>
</div>
<button class="btn btn-text btn-primary flex-shrink-0 ms-auto" type="button" data-toast="Team invitation opened"><span>Review invite</span></button>
</li>
<li class="list-item bg-primary bg-opacity-10 flex-column flex-sm-row align-items-stretch align-items-sm-start py-3">
<div class="d-flex align-items-start gap-3 flex-fill min-w-0">
<span class="avatar avatar-sm avatar-square bg-warning" aria-hidden="true">BI</span>
<span class="list-item-text min-w-0"><span class="d-flex align-items-center flex-wrap gap-2"><strong>Billing</strong><span class="badge bg-error">Action needed</span></span><span>The payment method for your workspace expires this month.</span><small class="text-muted"><time datetime="2026-09-06T16:15:00+02:00" aria-label="September 6, 2026 at 16:15">Yesterday</time></small></span>
</div>
<button class="btn btn-text btn-error flex-shrink-0 ms-auto" type="button" data-toast="Billing settings opened"><span>Update billing</span></button>
</li>
<li class="list-item flex-column flex-sm-row align-items-stretch align-items-sm-start py-3">
<div class="d-flex align-items-start gap-3 flex-fill min-w-0">
<span class="avatar avatar-sm avatar-square bg-success" aria-hidden="true">CI</span>
<span class="list-item-text min-w-0"><span class="d-flex align-items-center flex-wrap gap-2"><strong>Deployment service</strong><span class="badge bg-success">Completed</span></span><span>Version 0.85.2 was deployed to production.</span><small class="text-muted"><time datetime="2026-09-05T14:20:00+02:00" aria-label="September 5, 2026 at 14:20">2 days ago</time></small></span>
</div>
<button class="btn btn-text btn-primary flex-shrink-0 ms-auto" type="button" data-toast="Deployment details opened"><span>View deployment</span></button>
</li>
</ul>
</div>
</div>
</div>
</section>All caught up
Replace the unread list with the Empty State when no unread items remain. Keep navigation to the complete history available instead of presenting the state as an error.
<section class="card shadow-sm" aria-labelledby="empty-notifications-title">
<div
class="empty-state"
aria-labelledby="empty-notifications-title"
aria-describedby="empty-notifications-description">
<span class="empty-state-icon" aria-hidden="true">
<!-- Decorative notification icon -->
</span>
<h3 class="empty-state-title" id="empty-notifications-title">You are all caught up</h3>
<p class="empty-state-description" id="empty-notifications-description">
There are no unread workspace notifications.
</p>
<div class="empty-state-actions">
<a class="btn btn-solid btn-primary" href="/notifications">View all notifications</a>
<button
class="btn btn-outline btn-secondary"
type="button"
data-toast="Notification settings opened">
Notification settings
</button>
</div>
</div>
</section>