Notification

Toast messages shown from a NotificationBoard through the client API.

Types

Informational update.

Neutral notice for the current flow.

The action completed.

Check this before continuing.

The action failed.

<Notification type="info">Informational update.</Notification>
<Notification type="notice">Neutral notice for the current flow.</Notification>
<Notification type="success">The action completed.</Notification>
<Notification type="warning">Check this before continuing.</Notification>
<Notification type="error">The action failed.</Notification>

Interactive

<NotificationBoard id="page-notifications" delay={5000} />

dispatchCustomEvent('notification:show', {
  board: 'page-notifications',
  message: 'Saved',
  type: 'success',
})

Notification options

Option	Type	Default	Description
`children`	`string \| TemplateResult`	-	Notification message content.
`id`	`string`	generated by API	Element id used by the client API for close operations.
`type`	`info \| notice \| success \| warning \| error`	`info`	Visual tone and status role. Error uses `role="alert"`; other types use `role="status"`.
`close`	`boolean`	`true`	Shows the close button when enabled.
`class`	`string`	-	Additional class added to the notification root.

NotificationBoard options

Option	Type	Default	Description
`id`	`string`	-	Board id for anchoring a notification region in the page.
`position`	`top-right \| bottom-right \| top-left \| bottom-left`	`bottom-right`	Viewport corner where new notifications appear.
`delay`	`number`	`3000`	Auto-close delay in milliseconds. Set `delay: 0` to keep notifications until manual close.
`label`	`string`	`Notifications`	Accessible label for the aria-live region.
`class`	`string`	-	Additional class added to the board root.

Client API options

API	Options	Description
`dispatchCustomEvent('notification:show', detail)`	`board, type, close, class`	Dispatches `notification:show`. Untargeted notifications use the first board; `board` targets a board by id. Timing comes from the board.