Toast

Fire-and-forget notifications. Your script dispatches an event; the region queues, caps, and auto-dismisses.

Example

<Button id="save-demo" type="button">Save</Button>
<Toast />
<script>
  document.getElementById("save-demo")
    .addEventListener("click", () => {
      document.dispatchEvent(new CustomEvent("ink:toast:show", {
        detail: { title: "Saved", body: "All changes synced." },
      }));
    });
</script>

Event API

document.dispatchEvent(new CustomEvent("ink:toast:show", {
  detail: {
    title: "Saved",              // required
    body: "All changes synced.", // optional
    variant: "success",          // info | success | warning | danger (data hook)
    duration: 6000,              // optional, overrides region
  },
}));

Listen for ink:toast:shown and ink:toast:dismissed (both carry detail.id).

Assertive region

Errors need interruption. A second region can announce assertively:

Props

Prop	Type	Default	Description
`position`	`bottom-right \| bottom-left \| top-right \| top-left \| bottom-center`	`bottom-right`	Screen corner.
`duration`	`number`	`4000`	Auto-dismiss ms.
`max`	`number`	`3`	Queue cap; oldest is dropped.
`polite`	`boolean`	`true`	`false` renders an assertive alert region.

Accessibility

Live region announces without moving focus.
Every toast has a labeled dismiss button.
The cap stops notification spam; errors get the assertive region.