edible-toast

Programmatic notification toasts. Declare one <edible-toast> element anywhere on the page and call .show(message, type, duration) to trigger notifications. Toasts stack in the bottom-right corner and auto-dismiss after the given duration.


Types

Four built-in types: info (default), success, warning, and error.


Custom duration

The third argument sets the auto-dismiss delay in milliseconds. Default is 4000.


Stacking

Multiple toasts queue and stack vertically. Click to fire several at once.


Manual dismiss

Each toast has a dismiss button. This example uses a very long duration so the toast stays visible until you click ×.


← All examples