Toast — lunaDOM Docs

The <luna-toast> and <luna-toast-stack> components display temporary notification messages using a JavaScript API.

Paths

/lunadom/components/toast/toast.js

REQUIRED

/lunadom/components/toast-stack/toast-stack.js

REQUIRED

Toast Variants

Different notification types with auto-dismiss.

Primary

Success

Warning

Danger

Toast Options

Closable and persistent toasts.

Closable Toast

Persistent Toast

Fast Toast (1.5s)

Customization

Slots

luna-toast

default - Content of the toast message.

luna-toast-stack

default - Container for toast messages.

Attributes

luna-toast

variant - Toast variant (info, success, warning, danger). Defaults to 'info'.
duration - Auto-dismiss duration in milliseconds. Set to 0 to never auto-dismiss.

CSS Variables

luna-toast

--luna-radius - Border radius of toast. Defaults to 0.5rem.
--luna-bg - Background color (set automatically by variant).
--luna-color - Text color (set automatically by variant).
--luna-border - Border color (set automatically by variant).

Methods

luna-toast

dismiss() - Programmatically dismiss the toast.

luna-toast-stack

show(message, options) - Show a toast with the given message and options.
Luna.toast(message, options) - Global helper function to show toasts.

Events

luna-toast

luna-dismiss - Fired when toast is dismissed (bubbles, composed).

Example Code

<luna-toast-stack></luna-toast-stack>  <script type="module"> // Basic toast Luna.toast('Hello World!', { variant: 'success', duration: 3000 }); // Toast variants Luna.toast('Primary message', { variant: 'primary' }); Luna.toast('Success!', { variant: 'success' }); Luna.toast('Warning', { variant: 'warning' }); Luna.toast('Error occurred', { variant: 'danger' }); Luna.toast('Info message', { variant: 'neutral' }); // Closable toast Luna.toast('Can be dismissed', { closable: true, duration: 5000 }); // Persistent toast (duration: 0) Luna.toast('Stays until closed', { closable: true, duration: 0 }); // Custom duration Luna.toast('Quick toast', { duration: 1500 }); Luna.toast('Long toast', { duration: 10000 }); </script>