Toast

A block-level notification system. Mount a single <Toaster> near the root of the app and fire feedback from anywhere with the imperative toast() API. Toasts render at any of the six viewport corners, support promise tracking, swipe-to-dismiss, dedupe-by-id, and a built-in notification center.

Every toast row is an Alert card: the tone stamp and the title head it, the message is its content, the dismiss button is the alert’s own, and an action sits in its footer. A toast without a title is the compact single-row alert. The alert is the row’s live region — live="polite" (role="status"), or live="assertive" (role="alert") for danger toasts — so the row wrapper itself stays silent and nothing is announced twice. toast.custom() rows render no Alert and keep the live region on the wrapper.

Default

Mount a <Toaster> once and fire toasts from button handlers (or any other code path). Each call returns the toast’s id, which you can pass to toast.dismiss() or toast.update() later. Six built-in types — primary, success, danger, warning, neutral, and loading — drive the icon and color palette.

PreviewCode

---
// GENERATED from packages/demos/toast/default.demo.tsx — edit the source, not this file.
import Button from "@pindoba/astro-button";
import Toaster from "@pindoba/astro-toast";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}
  data-ir-root="toast/default"
>
  <Button data-ir="1">Primary</Button>
  <Button data-ir="2">Success</Button>
  <Button data-ir="3">Danger</Button>
  <Button data-ir="4">Warning</Button>
  <Button data-ir="5">Neutral</Button>
</div>

<Toaster position="bottom-right" data-ir-root="toast/default" />

<script>
  import { hydrate } from "./_client/default.ts";

  const roots = [
    ...document.querySelectorAll('[data-ir-root="toast/default"]'),
  ];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

// GENERATED from packages/demos/toast/default.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/react-button";
import { Toaster, toast } from "@pindoba/react-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function DefaultDemo() {
  return (
    <>
      <div className={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
        <Button
          onClick={() =>
            toast.primary({
              title: "New mention",
              content: "Jane tagged you in a doc.",
            })
          }
        >
          Primary
        </Button>
        <Button
          onClick={() =>
            toast.success({ title: "Saved", content: "Your changes are live." })
          }
        >
          Success
        </Button>
        <Button
          onClick={() =>
            toast.danger({
              title: "Couldn't save",
              content: "Network is unreachable.",
            })
          }
        >
          Danger
        </Button>
        <Button
          onClick={() =>
            toast.warning({
              title: "Heads up",
              content: "Disk is almost full.",
            })
          }
        >
          Warning
        </Button>
        <Button
          onClick={() =>
            toast.neutral({ title: "FYI", content: "Cache rebuilt." })
          }
        >
          Neutral
        </Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/toast/default.demo.tsx — edit the source, not this file.
  import Button from "@pindoba/svelte-button";
  import Toaster from "@pindoba/svelte-toast";
  import { toast } from "@pindoba/svelte-toast";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Button
    onclick={() =>
      toast.primary({
        title: "New mention",
        content: "Jane tagged you in a doc.",
      })}
  >
    Primary
  </Button>
  <Button
    onclick={() =>
      toast.success({ title: "Saved", content: "Your changes are live." })}
  >
    Success
  </Button>
  <Button
    onclick={() =>
      toast.danger({
        title: "Couldn't save",
        content: "Network is unreachable.",
      })}
  >
    Danger
  </Button>
  <Button
    onclick={() =>
      toast.warning({
        title: "Heads up",
        content: "Disk is almost full.",
      })}
  >
    Warning
  </Button>
  <Button
    onclick={() => toast.neutral({ title: "FYI", content: "Cache rebuilt." })}
  >
    Neutral
  </Button>
</div>

<Toaster position="bottom-right"></Toaster>

<script setup lang="ts">
// GENERATED from packages/demos/toast/default.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/vue-button";
import { Toaster } from "@pindoba/vue-toast";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";

const onClick = () =>
  toast.danger({
    title: "Couldn't save",
    content: "Network is unreachable.",
  });
</script>

<template>
  <div :class="stack({ gap: 'sm', direction: 'row', flexWrap: 'wrap' })">
    <Button
      :onClick="
        () =>
          toast.primary({
            title: 'New mention',
            content: 'Jane tagged you in a doc.',
          })
      "
    >
      Primary
    </Button>
    <Button
      :onClick="
        () =>
          toast.success({ title: 'Saved', content: 'Your changes are live.' })
      "
    >
      Success
    </Button>
    <Button :onClick="onClick">Danger</Button>
    <Button
      :onClick="
        () =>
          toast.warning({
            title: 'Heads up',
            content: 'Disk is almost full.',
          })
      "
    >
      Warning
    </Button>
    <Button
      :onClick="
        () => toast.neutral({ title: 'FYI', content: 'Cache rebuilt.' })
      "
    >
      Neutral
    </Button>
  </div>

  <Toaster position="bottom-right"></Toaster>
</template>

// GENERATED from packages/demos/toast/default.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/solid-button";
import { Toaster, toast } from "@pindoba/solid-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function DefaultDemo() {
  return (
    <>
      <div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
        <Button
          onClick={() =>
            toast.primary({
              title: "New mention",
              content: "Jane tagged you in a doc.",
            })
          }
        >
          Primary
        </Button>
        <Button
          onClick={() =>
            toast.success({ title: "Saved", content: "Your changes are live." })
          }
        >
          Success
        </Button>
        <Button
          onClick={() =>
            toast.danger({
              title: "Couldn't save",
              content: "Network is unreachable.",
            })
          }
        >
          Danger
        </Button>
        <Button
          onClick={() =>
            toast.warning({
              title: "Heads up",
              content: "Disk is almost full.",
            })
          }
        >
          Warning
        </Button>
        <Button
          onClick={() =>
            toast.neutral({ title: "FYI", content: "Cache rebuilt." })
          }
        >
          Neutral
        </Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

Emphasis

Toasts default to secondary emphasis — a calm, tinted Alert variant that doesn’t fight the rest of the page. Pass emphasis: "primary" for can’t-miss messages (saturated filled card), or emphasis: "tertiary" for the quietest variant. Set defaultEmphasis on <Toaster> to change the global default.

PreviewCode

---
// GENERATED from packages/demos/toast/emphasis.demo.tsx — edit the source, not this file.
import Button from "@pindoba/astro-button";
import Toaster from "@pindoba/astro-toast";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}
  data-ir-root="toast/emphasis"
>
  <Button data-ir="1">Default (secondary)</Button>
  <Button data-ir="2">Primary (loud)</Button>
  <Button data-ir="3">Tertiary (quietest)</Button>
</div>

<Toaster position="bottom-right" data-ir-root="toast/emphasis" />

<script>
  import { hydrate } from "./_client/emphasis.ts";

  const roots = [
    ...document.querySelectorAll('[data-ir-root="toast/emphasis"]'),
  ];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

// GENERATED from packages/demos/toast/emphasis.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/react-button";
import { Toaster, toast } from "@pindoba/react-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function EmphasisDemo() {
  return (
    <>
      <div className={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
        <Button
          onClick={() =>
            toast.success({
              title: "Saved",
              content: "Default toasts use secondary emphasis.",
            })
          }
        >
          Default (secondary)
        </Button>
        <Button
          onClick={() =>
            toast.danger({
              title: "Outage detected",
              content: "Reserve primary for can't-miss messages.",
              emphasis: "primary",
            })
          }
        >
          Primary (loud)
        </Button>
        <Button
          onClick={() =>
            toast.neutral({
              title: "Heads up",
              content: "Tertiary is the quietest variant.",
              emphasis: "tertiary",
            })
          }
        >
          Tertiary (quietest)
        </Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/toast/emphasis.demo.tsx — edit the source, not this file.
  import Button from "@pindoba/svelte-button";
  import Toaster from "@pindoba/svelte-toast";
  import { toast } from "@pindoba/svelte-toast";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Button
    onclick={() =>
      toast.success({
        title: "Saved",
        content: "Default toasts use secondary emphasis.",
      })}
  >
    Default (secondary)
  </Button>
  <Button
    onclick={() =>
      toast.danger({
        title: "Outage detected",
        content: "Reserve primary for can't-miss messages.",
        emphasis: "primary",
      })}
  >
    Primary (loud)
  </Button>
  <Button
    onclick={() =>
      toast.neutral({
        title: "Heads up",
        content: "Tertiary is the quietest variant.",
        emphasis: "tertiary",
      })}
  >
    Tertiary (quietest)
  </Button>
</div>

<Toaster position="bottom-right"></Toaster>

<script setup lang="ts">
// GENERATED from packages/demos/toast/emphasis.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/vue-button";
import { Toaster } from "@pindoba/vue-toast";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";

const onClick = () =>
  toast.danger({
    title: "Outage detected",
    content: "Reserve primary for can't-miss messages.",
    emphasis: "primary",
  });
</script>

<template>
  <div :class="stack({ gap: 'sm', direction: 'row', flexWrap: 'wrap' })">
    <Button
      :onClick="
        () =>
          toast.success({
            title: 'Saved',
            content: 'Default toasts use secondary emphasis.',
          })
      "
    >
      Default (secondary)
    </Button>
    <Button :onClick="onClick">Primary (loud)</Button>
    <Button
      :onClick="
        () =>
          toast.neutral({
            title: 'Heads up',
            content: 'Tertiary is the quietest variant.',
            emphasis: 'tertiary',
          })
      "
    >
      Tertiary (quietest)
    </Button>
  </div>

  <Toaster position="bottom-right"></Toaster>
</template>

// GENERATED from packages/demos/toast/emphasis.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/solid-button";
import { Toaster, toast } from "@pindoba/solid-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function EmphasisDemo() {
  return (
    <>
      <div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
        <Button
          onClick={() =>
            toast.success({
              title: "Saved",
              content: "Default toasts use secondary emphasis.",
            })
          }
        >
          Default (secondary)
        </Button>
        <Button
          onClick={() =>
            toast.danger({
              title: "Outage detected",
              content: "Reserve primary for can't-miss messages.",
              emphasis: "primary",
            })
          }
        >
          Primary (loud)
        </Button>
        <Button
          onClick={() =>
            toast.neutral({
              title: "Heads up",
              content: "Tertiary is the quietest variant.",
              emphasis: "tertiary",
            })
          }
        >
          Tertiary (quietest)
        </Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

Promise tracking

toast.promise() shows a sticky loading toast, then transitions in-place to a success or error toast based on the promise’s resolution. The DOM node is swapped so the new tone color, icon, and content all animate cleanly without unmount. Only the resolved state lands in history — loading toasts are transient and never recorded.

PreviewCode

---
// GENERATED from packages/demos/toast/promise.demo.tsx — edit the source, not this file.
import Button from "@pindoba/astro-button";
import Toaster from "@pindoba/astro-toast";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({ gap: "sm", direction: "row" })}
  data-ir-root="toast/promise"
>
  <Button data-ir="1">Resolve in 1.5s</Button>
  <Button data-ir="2">Reject in 1.5s</Button>
</div>

<Toaster position="bottom-right" data-ir-root="toast/promise" />

<script>
  import { hydrate } from "./_client/promise.ts";

  const roots = [
    ...document.querySelectorAll('[data-ir-root="toast/promise"]'),
  ];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

// GENERATED from packages/demos/toast/promise.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/react-button";
import { Toaster, toast } from "@pindoba/react-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function PromiseDemo() {
  function resolveDemo() {
    toast.promise(
      new Promise<string>((res) => setTimeout(() => res("ok"), 1500)),
      {
        loading: "Uploading…",
        success: "Uploaded",
        error: "Upload failed",
      },
    );
  }

  function rejectDemo() {
    toast
      .promise(
        new Promise<never>((_, rej) =>
          setTimeout(() => rej(new Error("503")), 1500),
        ),
        {
          loading: "Uploading…",
          success: "Uploaded",
          error: "Upload failed — try again",
        },
      )
      .catch(() => {
        /* swallow — toast already showed */
      });
  }

  return (
    <>
      <div className={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={resolveDemo}>Resolve in 1.5s</Button>
        <Button onClick={rejectDemo}>Reject in 1.5s</Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/toast/promise.demo.tsx — edit the source, not this file.
  import Button from "@pindoba/svelte-button";
  import Toaster from "@pindoba/svelte-toast";
  import { toast } from "@pindoba/svelte-toast";
  import { stack } from "@pindoba/styled-system/patterns";

  function resolveDemo() {
    toast.promise(
      new Promise<string>((res) => setTimeout(() => res("ok"), 1500)),
      {
        loading: "Uploading…",
        success: "Uploaded",
        error: "Upload failed",
      },
    );
  }
  function rejectDemo() {
    toast
      .promise(
        new Promise<never>((_, rej) =>
          setTimeout(() => rej(new Error("503")), 1500),
        ),
        {
          loading: "Uploading…",
          success: "Uploaded",
          error: "Upload failed — try again",
        },
      )
      .catch(() => {
        /* swallow — toast already showed */
      });
  }
</script>

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button onclick={resolveDemo}>Resolve in 1.5s</Button>
  <Button onclick={rejectDemo}>Reject in 1.5s</Button>
</div>

<Toaster position="bottom-right"></Toaster>

<script setup lang="ts">
// GENERATED from packages/demos/toast/promise.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/vue-button";
import { Toaster } from "@pindoba/vue-toast";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";

function resolveDemo() {
  toast.promise(
    new Promise<string>((res) => setTimeout(() => res("ok"), 1500)),
    {
      loading: "Uploading…",
      success: "Uploaded",
      error: "Upload failed",
    },
  );
}
function rejectDemo() {
  toast
    .promise(
      new Promise<never>((_, rej) =>
        setTimeout(() => rej(new Error("503")), 1500),
      ),
      {
        loading: "Uploading…",
        success: "Uploaded",
        error: "Upload failed — try again",
      },
    )
    .catch(() => {
      /* swallow — toast already showed */
    });
}
</script>

<template>
  <div :class="stack({ gap: 'sm', direction: 'row' })">
    <Button :onClick="resolveDemo">Resolve in 1.5s</Button>
    <Button :onClick="rejectDemo">Reject in 1.5s</Button>
  </div>

  <Toaster position="bottom-right"></Toaster>
</template>

// GENERATED from packages/demos/toast/promise.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/solid-button";
import { Toaster, toast } from "@pindoba/solid-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function PromiseDemo() {
  function resolveDemo() {
    toast.promise(
      new Promise<string>((res) => setTimeout(() => res("ok"), 1500)),
      {
        loading: "Uploading…",
        success: "Uploaded",
        error: "Upload failed",
      },
    );
  }

  function rejectDemo() {
    toast
      .promise(
        new Promise<never>((_, rej) =>
          setTimeout(() => rej(new Error("503")), 1500),
        ),
        {
          loading: "Uploading…",
          success: "Uploaded",
          error: "Upload failed — try again",
        },
      )
      .catch(() => {
        /* swallow — toast already showed */
      });
  }

  return (
    <>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={resolveDemo}>Resolve in 1.5s</Button>
        <Button onClick={rejectDemo}>Reject in 1.5s</Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

Action button

Add an action to render a button in the toast card’s footer (the dismiss control stays in its header). Use it for quick recoveries like undo, retry, or open-in-new-tab.

PreviewCode

---
// GENERATED from packages/demos/toast/actions.demo.tsx — edit the source, not this file.
import Button from "@pindoba/astro-button";
import Toaster from "@pindoba/astro-toast";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({ gap: "sm", direction: "row" })}
  data-ir-root="toast/actions"
>
  <Button data-ir="1">With action button</Button>
  <Button data-ir="2">Title-less</Button>
</div>

<Toaster position="bottom-right" data-ir-root="toast/actions" />

<script>
  import { hydrate } from "./_client/actions.ts";

  const roots = [
    ...document.querySelectorAll('[data-ir-root="toast/actions"]'),
  ];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

// GENERATED from packages/demos/toast/actions.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/react-button";
import { Toaster, toast } from "@pindoba/react-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function ActionsDemo() {
  function withAction() {
    toast.neutral({
      title: "Email archived",
      content: "Tap undo to restore it.",
      action: {
        label: "Undo",
        onClick: () => toast.success({ title: "Restored" }),
      },
    });
  }

  function noTitle() {
    toast.warning({
      content: "Title-less toasts use the row layout, like a compact alert.",
    });
  }

  return (
    <>
      <div className={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={withAction}>With action button</Button>
        <Button onClick={noTitle}>Title-less</Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/toast/actions.demo.tsx — edit the source, not this file.
  import Button from "@pindoba/svelte-button";
  import Toaster from "@pindoba/svelte-toast";
  import { toast } from "@pindoba/svelte-toast";
  import { stack } from "@pindoba/styled-system/patterns";

  function withAction() {
    toast.neutral({
      title: "Email archived",
      content: "Tap undo to restore it.",
      action: {
        label: "Undo",
        onClick: () => toast.success({ title: "Restored" }),
      },
    });
  }
  function noTitle() {
    toast.warning({
      content: "Title-less toasts use the row layout, like a compact alert.",
    });
  }
</script>

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button onclick={withAction}>With action button</Button>
  <Button onclick={noTitle}>Title-less</Button>
</div>

<Toaster position="bottom-right"></Toaster>

<script setup lang="ts">
// GENERATED from packages/demos/toast/actions.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/vue-button";
import { Toaster } from "@pindoba/vue-toast";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";

function withAction() {
  toast.neutral({
    title: "Email archived",
    content: "Tap undo to restore it.",
    action: {
      label: "Undo",
      onClick: () => toast.success({ title: "Restored" }),
    },
  });
}
function noTitle() {
  toast.warning({
    content: "Title-less toasts use the row layout, like a compact alert.",
  });
}
</script>

<template>
  <div :class="stack({ gap: 'sm', direction: 'row' })">
    <Button :onClick="withAction">With action button</Button>
    <Button :onClick="noTitle">Title-less</Button>
  </div>

  <Toaster position="bottom-right"></Toaster>
</template>

// GENERATED from packages/demos/toast/actions.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/solid-button";
import { Toaster, toast } from "@pindoba/solid-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function ActionsDemo() {
  function withAction() {
    toast.neutral({
      title: "Email archived",
      content: "Tap undo to restore it.",
      action: {
        label: "Undo",
        onClick: () => toast.success({ title: "Restored" }),
      },
    });
  }

  function noTitle() {
    toast.warning({
      content: "Title-less toasts use the row layout, like a compact alert.",
    });
  }

  return (
    <>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={withAction}>With action button</Button>
        <Button onClick={noTitle}>Title-less</Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

Deduplication

Calling toast() with an existing id reuses the active row instead of stacking a new one. The count badge updates, the timer resets, and the toast pops to the front of the deck. Deduped occurrences are also recorded in the history with a single entry whose count and timestamps accumulate.

PreviewCode

---
// GENERATED from packages/demos/toast/dedupe.demo.tsx — edit the source, not this file.
import Button from "@pindoba/astro-button";
import Toaster from "@pindoba/astro-toast";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "row" })} data-ir-root="toast/dedupe">
  <Button data-ir="1">Fire same id</Button>
</div>

<Toaster position="bottom-right" data-ir-root="toast/dedupe" />

<script>
  import { hydrate } from "./_client/dedupe.ts";

  const roots = [...document.querySelectorAll('[data-ir-root="toast/dedupe"]')];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

// GENERATED from packages/demos/toast/dedupe.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/react-button";
import { Toaster, toast } from "@pindoba/react-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function DedupeDemo() {
  function fireSame() {
    toast.success({
      id: "dedupe-demo",
      title: "Saved",
      content:
        "Same id — count badge ticks up and the toast pops to the front.",
    });
  }

  return (
    <>
      <div className={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={fireSame}>Fire same id</Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/toast/dedupe.demo.tsx — edit the source, not this file.
  import Button from "@pindoba/svelte-button";
  import Toaster from "@pindoba/svelte-toast";
  import { toast } from "@pindoba/svelte-toast";
  import { stack } from "@pindoba/styled-system/patterns";

  function fireSame() {
    toast.success({
      id: "dedupe-demo",
      title: "Saved",
      content:
        "Same id — count badge ticks up and the toast pops to the front.",
    });
  }
</script>

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button onclick={fireSame}>Fire same id</Button>
</div>

<Toaster position="bottom-right"></Toaster>

<script setup lang="ts">
// GENERATED from packages/demos/toast/dedupe.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/vue-button";
import { Toaster } from "@pindoba/vue-toast";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";

function fireSame() {
  toast.success({
    id: "dedupe-demo",
    title: "Saved",
    content: "Same id — count badge ticks up and the toast pops to the front.",
  });
}
</script>

<template>
  <div :class="stack({ gap: 'sm', direction: 'row' })">
    <Button :onClick="fireSame">Fire same id</Button>
  </div>

  <Toaster position="bottom-right"></Toaster>
</template>

// GENERATED from packages/demos/toast/dedupe.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/solid-button";
import { Toaster, toast } from "@pindoba/solid-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function DedupeDemo() {
  function fireSame() {
    toast.success({
      id: "dedupe-demo",
      title: "Saved",
      content:
        "Same id — count badge ticks up and the toast pops to the front.",
    });
  }

  return (
    <>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={fireSame}>Fire same id</Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

Position overrides

A toast can override the toaster’s default position to land in a different viewport corner — useful for forcing a critical error to top-center while everything else flows from bottom-right.

PreviewCode

---
// GENERATED from packages/demos/toast/positions.demo.tsx — edit the source, not this file.
import Button from "@pindoba/astro-button";
import Toaster from "@pindoba/astro-toast";
import { grid } from "@pindoba/styled-system/patterns";

const positions = [
  "top-left",
  "top-center",
  "top-right",
  "bottom-left",
  "bottom-center",
  "bottom-right",
] as const;
---

<div class={grid({ columns: 3, gap: "sm" })} data-ir-root="toast/positions">
  <!--ir:1-->
  {positions.map((position) => (
    <Button data-ir="2" data-ir-key={position}>
      <Fragment set:html="<!--ir:3-->" />
      {position}
      <Fragment set:html="<!--/ir-->" />
    </Button>
  ))}
  <!--/ir-->
</div>

<Toaster position="bottom-right" data-ir-root="toast/positions" />

<script>
  import { hydrate } from "./_client/positions.ts";

  const roots = [
    ...document.querySelectorAll('[data-ir-root="toast/positions"]'),
  ];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

// GENERATED from packages/demos/toast/positions.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/react-button";
import { Toaster, toast } from "@pindoba/react-toast";
import { grid } from "@pindoba/styled-system/patterns";
import type { ToastPosition } from "@pindoba/core-toast";

const positions = [
  "top-left",
  "top-center",
  "top-right",
  "bottom-left",
  "bottom-center",
  "bottom-right",
] as const;
export default function PositionsDemo() {
  function fire(position: ToastPosition) {
    toast.neutral({
      title: position,
      content: "Per-toast position override.",
      position,
    });
  }

  return (
    <>
      <div className={grid({ columns: 3, gap: "sm" })}>
        {positions.map((position) => (
          <Button key={position} onClick={() => fire(position)}>
            {position}
          </Button>
        ))}
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/toast/positions.demo.tsx — edit the source, not this file.
  import Button from "@pindoba/svelte-button";
  import Toaster from "@pindoba/svelte-toast";
  import { toast } from "@pindoba/svelte-toast";
  import { grid } from "@pindoba/styled-system/patterns";
  import type { ToastPosition } from "@pindoba/core-toast";

  const positions = [
    "top-left",
    "top-center",
    "top-right",
    "bottom-left",
    "bottom-center",
    "bottom-right",
  ] as const;

  function fire(position: ToastPosition) {
    toast.neutral({
      title: position,
      content: "Per-toast position override.",
      position,
    });
  }
</script>

<div class={grid({ columns: 3, gap: "sm" })}>
  {#each positions as position (position)}
    <Button onclick={() => fire(position)}>
      {position}
    </Button>
  {/each}
</div>

<Toaster position="bottom-right"></Toaster>

<script setup lang="ts">
// GENERATED from packages/demos/toast/positions.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/vue-button";
import { Toaster } from "@pindoba/vue-toast";
import { toast } from "@pindoba/core-toast";
import { grid } from "@pindoba/styled-system/patterns";
import type { ToastPosition } from "@pindoba/core-toast";

const positions = [
  "top-left",
  "top-center",
  "top-right",
  "bottom-left",
  "bottom-center",
  "bottom-right",
] as const;

function fire(position: ToastPosition) {
  toast.neutral({
    title: position,
    content: "Per-toast position override.",
    position,
  });
}
</script>

<template>
  <div :class="grid({ columns: 3, gap: 'sm' })">
    <Button
      v-for="position in positions"
      :key="position"
      :onClick="() => fire(position)"
    >
      {{ position }}
    </Button>
  </div>

  <Toaster position="bottom-right"></Toaster>
</template>

// GENERATED from packages/demos/toast/positions.demo.tsx — edit the source, not this file.
import { For } from "solid-js";
import { Button } from "@pindoba/solid-button";
import { Toaster, toast } from "@pindoba/solid-toast";
import { grid } from "@pindoba/styled-system/patterns";
import type { ToastPosition } from "@pindoba/core-toast";

const positions = [
  "top-left",
  "top-center",
  "top-right",
  "bottom-left",
  "bottom-center",
  "bottom-right",
] as const;
export default function PositionsDemo() {
  function fire(position: ToastPosition) {
    toast.neutral({
      title: position,
      content: "Per-toast position override.",
      position,
    });
  }

  return (
    <>
      <div class={grid({ columns: 3, gap: "sm" })}>
        <For each={positions}>
          {(position) => (
            <Button onClick={() => fire(position)}>{position}</Button>
          )}
        </For>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

Stacked deck

Set stacked to render multiple toasts as an overlapping deck. With expandOnHover, hovering or focusing the deck fans the rows out vertically so the user can read and interact with all of them.

PreviewCode

---
// GENERATED from packages/demos/toast/stacked.demo.tsx — edit the source, not this file.
import Button from "@pindoba/astro-button";
import Toaster from "@pindoba/astro-toast";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({ gap: "sm", direction: "row" })}
  data-ir-root="toast/stacked"
>
  <Button data-ir="1">Spawn random toast</Button>
</div>

<Toaster
  position="bottom-right"
  stacked
  expandOnHover
  data-ir-root="toast/stacked"
/>

<script>
  import { hydrate } from "./_client/stacked.ts";

  const roots = [
    ...document.querySelectorAll('[data-ir-root="toast/stacked"]'),
  ];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

// GENERATED from packages/demos/toast/stacked.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/react-button";
import { Toaster, toast } from "@pindoba/react-toast";
import { getToastStore } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function StackedDemo() {
  function spawn() {
    // Reapply the demo's Toaster config — needed when several demos share
    // one document and the user wants to see this demo's settings now.
    getToastStore().setConfig({ stacked: true, expandOnHover: true });
    const types = ["success", "danger", "warning", "neutral"] as const;
    const type = types[Math.floor(Math.random() * types.length)]!;
    toast[type]({
      title: type,
      content: `Spawned at ${new Date().toLocaleTimeString()}`,
    });
  }

  return (
    <>
      <div className={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={spawn}>Spawn random toast</Button>
      </div>

      <Toaster position="bottom-right" stacked expandOnHover />
    </>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/toast/stacked.demo.tsx — edit the source, not this file.
  import Button from "@pindoba/svelte-button";
  import Toaster from "@pindoba/svelte-toast";
  import { toast } from "@pindoba/svelte-toast";
  import { getToastStore } from "@pindoba/core-toast";
  import { stack } from "@pindoba/styled-system/patterns";

  function spawn() {
    // Reapply the demo's Toaster config — needed when several demos share
    // one document and the user wants to see this demo's settings now.
    getToastStore().setConfig({ stacked: true, expandOnHover: true });
    const types = ["success", "danger", "warning", "neutral"] as const;
    const type = types[Math.floor(Math.random() * types.length)]!;
    toast[type]({
      title: type,
      content: `Spawned at ${new Date().toLocaleTimeString()}`,
    });
  }
</script>

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button onclick={spawn}>Spawn random toast</Button>
</div>

<Toaster position="bottom-right" stacked expandOnHover></Toaster>

<script setup lang="ts">
// GENERATED from packages/demos/toast/stacked.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/vue-button";
import { Toaster } from "@pindoba/vue-toast";
import { toast, getToastStore } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";

function spawn() {
  // Reapply the demo's Toaster config — needed when several demos share
  // one document and the user wants to see this demo's settings now.
  getToastStore().setConfig({ stacked: true, expandOnHover: true });
  const types = ["success", "danger", "warning", "neutral"] as const;
  const type = types[Math.floor(Math.random() * types.length)]!;
  toast[type]({
    title: type,
    content: `Spawned at ${new Date().toLocaleTimeString()}`,
  });
}
</script>

<template>
  <div :class="stack({ gap: 'sm', direction: 'row' })">
    <Button :onClick="spawn">Spawn random toast</Button>
  </div>

  <Toaster
    position="bottom-right"
    :stacked="true"
    :expandOnHover="true"
  ></Toaster>
</template>

// GENERATED from packages/demos/toast/stacked.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/solid-button";
import { Toaster, toast } from "@pindoba/solid-toast";
import { getToastStore } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";

export default function StackedDemo() {
  function spawn() {
    // Reapply the demo's Toaster config — needed when several demos share
    // one document and the user wants to see this demo's settings now.
    getToastStore().setConfig({ stacked: true, expandOnHover: true });
    const types = ["success", "danger", "warning", "neutral"] as const;
    const type = types[Math.floor(Math.random() * types.length)]!;
    toast[type]({
      title: type,
      content: `Spawned at ${new Date().toLocaleTimeString()}`,
    });
  }

  return (
    <>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={spawn}>Spawn random toast</Button>
      </div>

      <Toaster position="bottom-right" stacked expandOnHover />
    </>
  );
}

History and notification center

Set enableHistory to keep dismissed toasts in a log. Pair with storageKey to persist across reloads. The built-in dialog is rendered for you — call toggleCenter() from the useToastHistory() composable (Svelte) or import from runtime (Astro) to open it. The dialog filters by All / Unread.

PreviewCode

---
// GENERATED from packages/demos/toast/history.demo.tsx — edit the source, not this file.
import Button from "@pindoba/astro-button";
import Toaster from "@pindoba/astro-toast";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({ gap: "sm", direction: "row" })}
  data-ir-root="toast/history"
>
  <Button data-ir="1">Push toast</Button>
  <Button data-ir="2">
    Open notifications (<Fragment set:html="<!--ir:3-->" />
    {0}
    <Fragment set:html="<!--/ir-->" />)
  </Button>
  <Button data-ir="4">Mark all read</Button>
  <Button data-ir="5">Clear history</Button>
</div>

<Toaster
  position="bottom-right"
  enableHistory
  storageKey="pindoba-toast-demo"
  data-ir-root="toast/history"
/>

<script>
  import { hydrate } from "./_client/history.ts";

  const roots = [
    ...document.querySelectorAll('[data-ir-root="toast/history"]'),
  ];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

// GENERATED from packages/demos/toast/history.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/react-button";
import { Toaster, toast, useToastHistory } from "@pindoba/react-toast";
import { stack } from "@pindoba/styled-system/patterns";

const samples = [
  { type: "success", title: "Saved", content: "Changes published." },
  { type: "danger", title: "Failed", content: "Unable to reach server." },
  { type: "warning", title: "Heads up", content: "Disk almost full." },
  { type: "neutral", title: "FYI", content: "Cache rebuilt." },
  {
    type: "primary",
    title: "New mention",
    content: "Jane tagged you in a doc.",
  },
  { type: "success", title: "Deployed", content: "Build finished in 12s." },
  { type: "warning", title: "Slow query", content: "Check the indexes." },
  { type: "danger", title: "Payment failed", content: "Card was declined." },
  { type: "neutral", title: "Reminder", content: "Standup in 5 minutes." },
  { type: "primary", title: "Sync complete", content: "Latest data is in." },
] as const;
export default function HistoryDemo() {
  const history = useToastHistory();

  function pushRandom() {
    const s = samples[Math.floor(Math.random() * samples.length)]!;
    toast[s.type]({ title: s.title, content: s.content });
  }

  return (
    <>
      <div className={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={pushRandom}>Push toast</Button>
        <Button onClick={() => history.toggleCenter(true)}>
          Open notifications ({history.unreadCount})
        </Button>
        <Button onClick={() => history.markAllAsRead()}>Mark all read</Button>
        <Button onClick={() => history.clearHistory()}>Clear history</Button>
      </div>

      <Toaster
        position="bottom-right"
        enableHistory
        storageKey="pindoba-toast-demo"
      />
    </>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/toast/history.demo.tsx — edit the source, not this file.
  import Button from "@pindoba/svelte-button";
  import Toaster from "@pindoba/svelte-toast";
  import { toast, useToastHistory } from "@pindoba/svelte-toast";
  import { stack } from "@pindoba/styled-system/patterns";

  const samples = [
    { type: "success", title: "Saved", content: "Changes published." },
    { type: "danger", title: "Failed", content: "Unable to reach server." },
    { type: "warning", title: "Heads up", content: "Disk almost full." },
    { type: "neutral", title: "FYI", content: "Cache rebuilt." },
    {
      type: "primary",
      title: "New mention",
      content: "Jane tagged you in a doc.",
    },
    { type: "success", title: "Deployed", content: "Build finished in 12s." },
    { type: "warning", title: "Slow query", content: "Check the indexes." },
    { type: "danger", title: "Payment failed", content: "Card was declined." },
    { type: "neutral", title: "Reminder", content: "Standup in 5 minutes." },
    { type: "primary", title: "Sync complete", content: "Latest data is in." },
  ] as const;

  const history = useToastHistory();

  function pushRandom() {
    const s = samples[Math.floor(Math.random() * samples.length)]!;
    toast[s.type]({ title: s.title, content: s.content });
  }
</script>

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button onclick={pushRandom}>Push toast</Button>
  <Button onclick={() => history.toggleCenter(true)}>
    Open notifications ({history.unreadCount})
  </Button>
  <Button onclick={() => history.markAllAsRead()}>Mark all read</Button>
  <Button onclick={() => history.clearHistory()}>Clear history</Button>
</div>

<Toaster position="bottom-right" enableHistory storageKey="pindoba-toast-demo"
></Toaster>

<script setup lang="ts">
// GENERATED from packages/demos/toast/history.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/vue-button";
import { Toaster, useToastHistory } from "@pindoba/vue-toast";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";

const samples = [
  { type: "success", title: "Saved", content: "Changes published." },
  { type: "danger", title: "Failed", content: "Unable to reach server." },
  { type: "warning", title: "Heads up", content: "Disk almost full." },
  { type: "neutral", title: "FYI", content: "Cache rebuilt." },
  {
    type: "primary",
    title: "New mention",
    content: "Jane tagged you in a doc.",
  },
  { type: "success", title: "Deployed", content: "Build finished in 12s." },
  { type: "warning", title: "Slow query", content: "Check the indexes." },
  { type: "danger", title: "Payment failed", content: "Card was declined." },
  { type: "neutral", title: "Reminder", content: "Standup in 5 minutes." },
  { type: "primary", title: "Sync complete", content: "Latest data is in." },
] as const;

const history = useToastHistory();

function pushRandom() {
  const s = samples[Math.floor(Math.random() * samples.length)]!;
  toast[s.type]({ title: s.title, content: s.content });
}

const onButtonClick = () => history.toggleCenter(true);
const onButtonClick2 = () => history.markAllAsRead();
const onButtonClick3 = () => history.clearHistory();
</script>

<template>
  <div :class="stack({ gap: 'sm', direction: 'row' })">
    <Button :onClick="pushRandom">Push toast</Button>
    <Button :onClick="onButtonClick"
      >Open notifications ({{ history.unreadCount.value }})</Button
    >
    <Button :onClick="onButtonClick2">Mark all read</Button>
    <Button :onClick="onButtonClick3">Clear history</Button>
  </div>

  <Toaster
    position="bottom-right"
    :enableHistory="true"
    storageKey="pindoba-toast-demo"
  ></Toaster>
</template>

// GENERATED from packages/demos/toast/history.demo.tsx — edit the source, not this file.
import { Button } from "@pindoba/solid-button";
import { Toaster, toast, useToastHistory } from "@pindoba/solid-toast";
import { stack } from "@pindoba/styled-system/patterns";

const samples = [
  { type: "success", title: "Saved", content: "Changes published." },
  { type: "danger", title: "Failed", content: "Unable to reach server." },
  { type: "warning", title: "Heads up", content: "Disk almost full." },
  { type: "neutral", title: "FYI", content: "Cache rebuilt." },
  {
    type: "primary",
    title: "New mention",
    content: "Jane tagged you in a doc.",
  },
  { type: "success", title: "Deployed", content: "Build finished in 12s." },
  { type: "warning", title: "Slow query", content: "Check the indexes." },
  { type: "danger", title: "Payment failed", content: "Card was declined." },
  { type: "neutral", title: "Reminder", content: "Standup in 5 minutes." },
  { type: "primary", title: "Sync complete", content: "Latest data is in." },
] as const;
export default function HistoryDemo() {
  const history = useToastHistory();

  function pushRandom() {
    const s = samples[Math.floor(Math.random() * samples.length)]!;
    toast[s.type]({ title: s.title, content: s.content });
  }

  return (
    <>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={pushRandom}>Push toast</Button>
        <Button onClick={() => history.toggleCenter(true)}>
          Open notifications ({history.unreadCount})
        </Button>
        <Button onClick={() => history.markAllAsRead()}>Mark all read</Button>
        <Button onClick={() => history.clearHistory()}>Clear history</Button>
      </div>

      <Toaster
        position="bottom-right"
        enableHistory
        storageKey="pindoba-toast-demo"
      />
    </>
  );
}

Each center entry is an Alert card too — the same card as the toast it recorded, without the live region and the dismiss button. The latest timestamp sits in the card header’s trailing slot (the end of the row for a title-less entry).

The center’s tray is a Panel root (data-component="toast-center"), so its surface is a set of Panel props rather than hand-painted CSS. Its defaults — a recessed surface.ground fill, an lg corner, no border and no shadow — reproduce the tray exactly as it looked before. Because the tray sits inside the center’s Dialog panel, radius="inner" resolves the concentric corner against that dialog:

import { connectToaster } from "@pindoba/core-toast";

const api = connectToaster({ center: { radius: "inner", border: "muted" } });
// api.centerBodyProps is the tray's Panel bag

The <Toaster> blocks render a single, app-wide center, so the surface is set through the core option rather than a component prop — there is no per-instance demo for it.

API

The Props tab documents three surfaces:

Toaster — configuration props for the <Toaster> you mount once.
Toast — the options object passed to toast(...) (and the typed shortcuts below).
ToastHistory — the object returned by the useToastHistory() composable (Svelte), or getToastHistoryHandles() from @pindoba/astro-toast/runtime (Astro).

Convenience methods

toast.success(input) / toast.danger(input) / toast.warning(input) / toast.neutral(input) / toast.loading(input) — shortcuts that set type for you.
toast.custom(content, options?) — render arbitrary DOM content (no Alert wrapper).
toast.dismiss(id) — force-close a toast.
toast.promise(promise, { loading, success, error }, options?) — track an async value through loading → success | error.

#Default

#Emphasis

#Promise tracking

#Action button

#Deduplication

#Position overrides

#Stacked deck

#History and notification center

#API

#Convenience methods

Default

Emphasis

Promise tracking

Action button

Deduplication

Position overrides

Stacked deck

History and notification center

API

Convenience methods