<baht-toast>

Toast host. Put one <baht-toast> on the page and call show() from anywhere; toasts stack bottom-right, auto-dismiss, and carry their tone as a left accent. If you would rather not place the host yourself, toast.success('Saved.') from the dialog & toast service mounts one on first use.

Show a toast

Save

duration

show() returns the toast id. duration=0 makes it sticky until dismiss(id) or the × button.

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>

Tones

neutral (default), success, info, warning, danger. danger and warning render with role="alert" so screen readers announce them at once; the others ride the polite live region.

All tones

neutralsuccessinfowarningdanger

HTMLReactAngular

Copy

<baht-button variant="secondary" data-tone="neutral" data-message="Schema reloaded.">neutral</baht-button>
<baht-button variant="secondary" data-tone="success" data-message="Saved.">success</baht-button>
<baht-button variant="secondary" data-tone="info" data-message="3 rows skipped.">info</baht-button>
<baht-button variant="secondary" data-tone="warning" data-message="Draft not saved yet.">warning</baht-button>
<baht-button variant="secondary" data-tone="danger" data-message="Couldn't reach the webhook.">danger</baht-button>
<baht-toast id="tone-host"></baht-toast>

<script>
  const host = document.getElementById('tone-host');
  for (const btn of document.querySelectorAll('[data-tone]')) {
  btn.addEventListener('click', () =>
    host.show({ message: btn.dataset.message, tone: btn.dataset.tone }),
  );
  }
</script>

Sticky and programmatic dismiss

duration: 0 + dismiss(id)

Start uploadFinish

baht-dismiss fires when the toast goes — manual ×, timer or dismiss(id) — before its exit animation ends.

HTMLReactAngular

Copy

<baht-button id="sticky-show" variant="secondary">Start upload</baht-button>
<baht-button id="sticky-done">Finish</baht-button>
<baht-toast id="sticky-host"></baht-toast>

<script>
  const host = document.getElementById('sticky-host');
  let id = null;
  document.getElementById('sticky-show').addEventListener('click', () => {
  id = host.show({ message: 'Uploading 4 files…', tone: 'info', duration: 0 });
  });
  document.getElementById('sticky-done').addEventListener('click', () => {
  if (id !== null) host.dismiss(id);
  host.show({ message: 'Upload complete.', tone: 'success' });
  });
</script>

Props

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

Methods

• show()
• dismiss()

Method	Notes
show({ message, tone?, duration? })	returns the entry id. tone: 'neutral' | 'success' | 'info' | 'warning' | 'danger'. duration in ms, 0 = sticky, unset = the host’s duration
dismiss(id)	removes one toast and emits baht-dismiss

ToastOptions is exported from bank20baht-ui for typing your own wrapper.

Events

Event	detail	Description
baht-dismiss	{ id: number, message: string }	A toast went away — manual, timer or dismiss(id)
name	CustomEvent

Styling

Class	What it is
.baht-toaster	fixed bottom-right stack, aria-live="polite"
.baht-toast	one entry; --success / --info / --warning / --danger set the left accent
.baht-toast--leaving	added while the exit animation plays
.baht-toast-message, .baht-toast-dismiss	text and × button

Copy is short and dry: “Saved.”, not “Successfully saved your changes!”.