Notification

Notification cards anchored to the four viewport corners, supporting title, description, duration, type, pause-on-hover, priority preemption, and stack governance (collapsible counter / peek-on-hover).

Basic usage

Four types

InfoSuccessWarningError

Example

Custom duration

Custom duration

8sNo auto-close

Example

With progress bar

With progress bar

Progress bar (bottom)Progress bar (top)

Example

Scrollable long content

Scrollable long content

Long content

Example

Four positions

Four positions

Top leftTop rightBottom leftBottom right

Example

Max count

Max count (oldest dropped)

Fire 6 (max=3)Clear

Example

Pause on hover

Pause on hover (default on)

Pause on hoverDisable pause

Example

onClose callback

onClose callback

Auto close, ✕ click, or imperative destroy — onClose fires exactly once either way:

Imperative destroyAuto/manual closeonClose fired: 0 times

Example

onClick callback

onClick callback (view details)

Clickable notificationonClick fired: 0 times

Example

Closable switch

Closable switch

closable=falseDefault (closable)

Example

Icon slots

Icon slots slot="icon" / slot="close-icon"

Show custom iconsRemove

Example

Update by key

Update by key

Simulate deploy progress

Example

Progress color

Progress color --oas-notification-progress-color

The notification mounts into the container below (container), so the color variable on it pierces through — watch the danger-colored bar at the top right:

Danger progress notification

Example

Offset

Offset

offset=64Default 16

Example

Mount container

Mount container

The stack is appended into the container below (DOM ownership; visuals stay viewport-fixed). Inspect devtools to see the stack inside div#notif-mount-host:

Mount below

Mount target (notif-mount-host)

Example

Footer actions

Footer actions (view details / undo)

Notification with footer

Example

Priority

Priority (high preempts)

Fire normal notifications first (max=5), then high ones: high stays on the newest side; low priority is evicted first when over the limit:

Fire 4 normalFire 2 highClear

Example

Stack governance

Stack governance stackMode (collapsible / peek)

Collapsible (+N expands)Peek (hover expands)Clear

Example

Loading and promise

Loading state and promise chain

Persistent loadingpromise successpromise failure

Example

Rich content and size

Rich content and size

Small + code blockMedium + code blockLarge + code block

Example

Clear all

Clear all

Fire threeClear all

Example

API

oas-notification

Attributes

Attribute	Description	Type	Default
closable	Whether to show the close button (default true; false hides it)	string	true
description	Description content	string	—
duration	Auto-close duration in ms; pass 0 to keep it open	string	4500
pause-on-hover	Pause timer and progress bar on hover (default on; mouseenter/leave channel); remaining time resumes on leave	string	true
progress-position	Progress bar position: bottom (default) / top	string	bottom
scrollable	Scroll inside the card when the content is too long; enabled by default, pass false to disable	string	true
show-progress	Show the auto-close countdown progress bar (animates in sync with duration)	boolean	—
size	Size preset (pairs with the --oas-notification-width variable)	—	—
title	Title text (rendered into the visible title region; absorbed from the host on read so no native hover tooltip remains; pass an empty string to clear); use the "title" slot for rich content	string	—
type	Notification type: info/success/warning/error	string	info

Events

Event	Description
oas-click	Dispatched when the notification body is clicked ("click for details" scenario)
oas-close	Dispatched on close, detail { source }: auto (duration elapsed) / button (close button) / destroy (programmatic) / evict (evicted when over the limit)

Slots

Name	Description
close-icon	Custom close icon, overrides the default ✕
content	Rich body content slot
footer	Footer action slot (action buttons / meta row)
icon	Icon slot; overrides the default type icon
title	Rich title content slot; overrides the title attribute text when present

CSS Variables

CSS Variable	Description	Default
--oas-glass-blur	—	none
--oas-glass-refraction	Liquid-glass edge refraction filter (active under data-glass, default none); for local opt-out override with an empty value (--oas-glass-refraction: ;)—not none (mixing none with button-state brightness() invalidates the whole filter declaration)	none
--oas-glass-ring	—	transparent
--oas-notification-progress-color	Countdown progress bar color	var(--oas-color-primary)
--oas-notification-width	Card width (referenced internally by size levels)	320px

Methods

Method	Description
notification.info({ title, description?, content?, duration?, showProgress?, progressPosition?, scrollable?, position?, max?, offset?, container?, priority?, stackMode?, stackThreshold?, key?, onClose?, onClick?, closable?, pauseOnHover?, size?, icon?, closeIcon?, footer? })	Info notification, returns { close }
notification.success(...) / notification.warning(...) / notification.error(...)	Success/warning/error notifications, same options
notification.loading(...)	Loading state: spinner icon, no auto close, not manually closable
notification.promise(p, { loading, success, error })	Promise chain: loading → success on resolve (auto closes in 4500ms) / error on reject
notification.update(key, { title?, description?, content?, duration?, type? })	Update an existing notification (located by key); creates one if the key is unknown
notification.destroy(key)	Close the notification with the given key; silent no-op if absent
destroyAllNotification()	Clear all notifications (does not fire onClose)

• position covers four corners: top-right (default) / top-left / bottom-right / bottom-left; each corner owns an independent stack container.
• max caps the stack size (default 0 = unlimited); the oldest is dropped first — oldest normal first, oldest high only when all are high; evictions also fire onClose (source: 'evict').
• offset sets the stack distance from the viewport edge (default 16) along the position direction; container overrides the mount target (nearest app host or body by default).
• priority: high always stays on the newest side (later normals insert before it); preemption is realized by insertion order + the max eviction strategy.
• stackMode governance: collapsible (folds older notifications beyond stackThreshold, default 3; "+N" badge toggles expand/collapse) / peek (non-newest cards collapse to edge strips; hovering the stack expands).
• onClose fires exactly once per close; onClick is the card-body click callback; closable defaults to true; pauseOnHover is on by default (pauses timer and progress bar on hover).
• title/icon/closeIcon/footer/content accept rich Node channels; footer also accepts an array of Nodes.
• Imperatively created notifications mount to the nearest oas-app host (body otherwise), role="region" + aria-label, stacked at the top-right by default.