Rokkit 1.0.3

Message

Alert and notification message component

The alerts system has three parts: the alerts store (in @rokkit/states), the Message component (a single notification), and AlertList (the fixed-position toast container that reads from the store).

Live Demo

Push alerts to the store. They appear in the top-right corner. Change the position using the selector below.

Position:

Quick Start

Mount AlertList once at the app root, then push alerts from anywhere:

svelte
Highlighting code...
svelte
Highlighting code...

Inline Message

Use Message without the store for inline notifications inside layouts. All four types:

Something went wrong. Please try again.
Your session expires in 5 minutes.
A new version is available. Refresh to update.
Your changes have been saved.
svelte
Highlighting code...

Dismissible Message

Add dismissible to show a dismiss button. Wire ondismiss to remove it from your state:

You can dismiss this message.
svelte
Highlighting code...

Auto-dismiss

Set timeout (in ms) on a standalone Message or when pushing to the store. The component calls ondismiss after the delay. Non-dismissible toasts auto-dismiss after 4 s by default.

svelte
Highlighting code...

Alerts Store API

push(alert) → id

  • type: 'error' | 'info' | 'success' | 'warning' (default: 'info')
  • text: Message string
  • dismissible: Show × button — stays until dismissed (default: false)
  • timeout: Auto-dismiss delay in ms (default: 4000 for non-dismissible, 0 for dismissible)
  • actions: Snippet reference for action buttons

dismiss(id) / clear()

  • dismiss(id): Remove one alert by id, cancels its timer
  • clear(): Remove all alerts, cancel all timers
  • alerts.current: Reactive array of active alerts

AlertList Props

position

  • 'top-right' (default)
  • 'top-center'
  • 'top-left'
  • 'bottom-right'
  • 'bottom-center'
  • 'bottom-left'

Design Notes

  • Mount AlertList once at the root — it reads the global alerts store
  • Bottom positions stack newest-first at the screen edge
  • role="alert" on error/warning; role="status" on info/success
  • Container is pointer-events: none; individual toasts restore it

Message Props

Core Props

  • type: 'info' | 'success' | 'warning' | 'error'
  • text: Message string
  • dismissible: Show dismiss button (default: false)
  • timeout: Auto-dismiss delay in ms (default: 0)

Events & Snippets

  • ondismiss: Called when dismissed or timeout fires
  • icons: Override state icon map
  • actions: Snippet for action buttons inside the message