<baht-toast>

Toast host. Put ONE per page, call show() to display notifications.

Show a toast

Save

duration

duration=0 in show() makes a sticky toast.

HTMLReactAngular

Copy

<baht-button id="toast-btn">Save</baht-button>
<baht-toast id="toaster"></baht-toast>

<script>
  const toaster = document.getElementById('toaster');
  document.getElementById('toast-btn').addEventListener('click', () => {
  toaster.show({ message: 'Saved.', tone: 'success' });
  });
</script>

Props

Name	Type	Default	Description
duration	number	4000	Default auto-dismiss ms (0 = sticky)

Events

Event	detail	Description
name	CustomEvent
baht-dismiss	{ id, message }	A toast went away