Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

block · notification-region

Notification region

A native-first notification stack for application-owned status messages composed from alert surfaces.

Install with npx @madojs/ui@latest add notification-region.

Block

Notification region

Application-owned status messages

Additions update one stable polite announcer while visual alerts remain ordinary, persistent content with native controls.

  1. Persistent by default

    It remains available until the application removes it explicitly.

Composition

  • Keep one stable region containing a notification list and a visually hidden stable announcer; render each notification as an alert recipe.

Public API

class mado-ui-notification-region / list / item / announcer
Queue, item and announcement presentation hooks.
class mado-ui-alert
Visual message surface supplied by the alert dependency.

Detected public classes

  • .mado-ui-alert
  • .mado-ui-notification-announcer
  • .mado-ui-notification-item
  • .mado-ui-notification-list
  • .mado-ui-notification-region

Detected public CSS properties

  • --mado-ui-notification-gap
  • --mado-ui-notification-inline-size
  • --mado-ui-notification-max-block-size
  • --mado-ui-space-3

Accessibility contract

  • The application owns queue creation, deduplication, announcement timing, dismissal labels and persisted-message policy.
  • Announce concise new information through one stable live region; do not make every list item a competing live region.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • New notifications do not steal focus. Dismissal returns or repairs focus only if the removed notification contained the active element.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.