Examples
Basic
Header with title + count, body listing three notifications across info / warning / success severities.
Notifications
3 unread-
info notification: Build completed
Pipeline #1247 finished in 3m 12s. -
warning notification: Memory threshold exceeded
Node prod-3 is at 92% memory usage. -
success notification: Deploy succeeded
v2.18.3 rolled out to all replicas.
Groups
Expandable groups with unread counts in the toggles.
Notifications
3 unread-
warning notification: Memory threshold exceeded
Node prod-3 is at 92% memory usage. -
info notification: Pod restarted
api-7d9f restarted twice in 10 minutes.
-
success notification: Deploy succeeded
v2.18.3 rolled out to staging.
Lightweight
Headerless list for embedding outside the page chrome.
-
info notification: Build completed
Pipeline #1247 finished in 3m 12s. -
success notification: Deploy succeeded
v2.18.3 rolled out to all replicas.
Documentation
Notification drawer props
The notification drawer is a template family:
notification-drawer is the root and the body composes from
notification-drawer-list >
notification-drawer-list-item, with
notification-drawer-group for expandable groups — all main-block includes.
| Name | Type | Description |
|---|---|---|
id / attrs
|
String | Root id / raw passthrough (e.g. the groups x-data). |
hasHeader / titleText / headerStatus
|
Boolean / String | Render the header with a title and status line; omit hasHeader for the lightweight variant. |
ariaLabel
|
String | Region label (defaults to titleText). |
notification-drawer-list
|
Include | The list wrapper; holds list-item includes. |
notification-drawer-list-item
|
Include |
One notification: variant (info|warning|success|danger),
read, iconName,
title, description,
timestamp.
|
notification-drawer-group
|
Include |
Expandable group: title, openVar (x-data boolean
name), count, countRead.
|
Usage
Pair with a Drawer. Render the notification-drawer inside a Drawer's panel — Drawer handles open/close from a masthead bell icon.