Message

Imperative global message notifications with type icons, loading state, hover-pause, countdown progress, placement/offset, max cap, rich content, and promise chains. Enter/exit animations use transform/opacity and respect prefers-reduced-motion.

Basic usage

Six types

SuccessErrorWarningInfoQuestionLoading

Example

Type icons

Built-in types come with icons. Customize via icon (resolved through the shared lookupIcon channel, so registerIcon custom icons work too); set show-icon="false" to hide.

Type icons & customization

Custom icon (msg-heart)Hide icon

Example

Loading & async flows

message.loading() does not auto-close by default; pair it with message.update(key, options) for a lightweight async flow.

Loading & async flows

Start upload (loading)Mark as successClose this message

Example

Custom duration & manual close

Custom duration

2s5sNo auto-close (0)Close manuallyNot closable

Example

Click to close

Clicking the message body fires the onClick callback and closes the message (source: 'click'); the close button reports source: 'close'.

Click to close

Show clickable messageShow click count

Example

Hover / focus pause

pause-on-hover is enabled by default: hovering the message or focusing the close button pauses the auto-close timer (remaining time is tracked); the timer resumes on leave. Page visibility changes also pause the countdown.

Hover pause

Auto-close in 10sPause/resumePauseResume

Example

Countdown progress

show-progress renders a countdown progress bar whose animation duration matches duration; hovering pauses the bar along with the timer.

Countdown progress

With progress (5s)With progress (8s)

Example

Placement & offset

placement supports top / bottom (top-center is the default; center/corners belong to the toast form). offset is a single number in px (default 16).

Placement & offset

topbottomtop + offset 80bottom + offset 40

Example

Max cap

max caps the stack; the oldest message is evicted first when the cap is exceeded.

Max cap

ResetFire repeatedly (max 2)

Example

Rich content

content accepts string | Node; a Node is injected into the text area directly (no innerHTML channel).

Rich content

Text contentRich content (Node)

Example

Promise chain

message.promise(promise, { loading, success, error }): loading → success on resolve / error on reject, auto-closing 3s after success.

Promise chain

Simulate successSimulate failure

Example

Grouped messages & repeat badge

Messages with the same group merge into one; repeated triggers increment the count (×n). With repeatNum: true a repeat-count badge appears in the corner. Different groups are independent.

Grouped messages

Save (click repeatedly)Sync (another group)

Example

Customization

avatar (Node or slot="avatar"), custom spinner (icon name or Node), registerType for custom types, and mask overlay (click the mask to close).

Customization

AvatarCustom spinnerCustom typeMask

Example

Declarative usage

<oas-message> also works declaratively: attributes map 1:1 to the imperative options, text goes into the content area, rich content uses slot="content".

Declarative usage

Declarative success messageCountdown progress demo (auto-closes in 15s; hover to pause)Declarative + static badgeRich declarative content: slots supported

Example

App global defaults

<oas-app message='{...}'> configures global defaults for the message API (call options win): duration / closable / pauseOnHover / placement / offset / max / showProgress / showIcon / mask / repeatNum.

App global defaults

Enable global defaults (bottom + max 2 + no icon)Clear global defaultsSend messageLocal override

Example

API

Methods

Method	Description
message.info(content, options?)	Info message, returns { close, pause, resume }
message.success(content, options?)	Success message
message.warning(content, options?)	Warning message
message.error(content, options?)	Error message
message.question(content, options?)	Question message (question icon)
message.loading(content, options?)	Loading message (no auto-close, not closable by default)
message.show(type, content, options?)	Generic entry: built-in type or one registered via registerType
message.update(key, { content, type?, duration? })	Update an existing message; creates a new one if the key does not exist
message.destroy(key)	Close the message identified by key
message.promise(promise, { loading, success, error })	Promise chain: loading → success/error
message.registerType(name, { icon?, color?, closable? })	Register a custom message type
destroyAllMessage()	Clear all messages

oas-message

Attributes

Attribute	Description	Type	Default
closable	Whether to show the close button (default true; hidden while loading)	string	true
count	Merge count (shows ×n after content when > 1)	string	0
duration	Auto-close duration (ms), 0 to keep open	string	3000
group	Group id: messages in the same group merge into one	—	—
icon	Custom icon (declarative element usage); overrides the default type icon	string	—
key	Unique id: used by message.update / message.destroy	—	—
mask	Show a page mask; clicking it closes the message with oas-close detail.source = mask	boolean	—
pause-on-hover	Pause the timer on hover (default on), resume with the remaining time on leave	string	true
placement	Declarative element usage position: top (default) / bottom	—	—
repeat-num	Repeat badge: merge repeated identical messages with a counter	string	—
show-icon	Whether to show the type icon (default true; false for text only)	string	true
show-progress	Show a countdown progress bar synced with the duration	boolean	—
type	Message type: info/success/warning/error/loading/question	string	info

Events

Event	Description
oas-close	Emitted when the message closes (auto-close / close button / destroy / click / mask), detail: { key?, source } (source: auto/close/destroy/click/mask)

Slots

Name	Description
avatar	Avatar slot (before the message text)
content	Rich body content slot

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-message-anim-in	—	220ms
--oas-message-anim-out	—	180ms
--oas-msg-type-color	—	var(--oas-color-border)

options

• { duration?, group?, key?, onClose?, closable?, pauseOnHover?, placement?, offset?, max?, icon?, showIcon?, showProgress?, repeatNum?, mask?, onClick?, avatar?, spinner? }
• content (first arg) accepts string | Node rich content; group merges and increments the count; key is used by update / destroy; onClose fires on close; onClick fires on message-body click (closes with source: 'click').
• duration defaults to 3000ms; pass 0 to keep open; offset defaults to 16px; max evicts the oldest.
• Hover / focus / page-hidden automatically pause the countdown (remaining time is tracked); error uses role="alert", others use role="status".
• Enter/exit animations use transform/opacity (durations via the --oas-message-anim-in / --oas-message-anim-out CSS variables) and respect prefers-reduced-motion.
• Colors use CSS variable tokens only; registerType's color is an explicitly injected CSS color (the component never hardcodes color values).