Toast

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/toast.json

Add Toast.Provider and Toast.AnchoredProvider to your app layout.

<script lang="ts">
  import * as Toast from "$lib/components/ui/toast/index.js";
  import type { Snippet } from "svelte";

  let { children }: { children: Snippet } = $props();
</script>

<Toast.Provider>
  <Toast.AnchoredProvider>
    {@render children()}
  </Toast.AnchoredProvider>
</Toast.Provider>

Usage

Stacked Toasts

<script lang="ts">
  import * as Toast from "$lib/components/ui/toast/index.js";

  function createEvent() {
    Toast.toastManager.add({
      title: "Event has been created",
      description: "Monday, January 3rd at 6:00pm",
    });
  }
</script>

By default, toasts appear in the bottom-right corner. Change this with the position prop on Toast.Provider.

Allowed values are top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.

<Toast.Provider position="top-center">
  {@render children()}
</Toast.Provider>

Deduplicated toasts (upsert)

Pass a stable id when calling Toast.toastManager.add. If a toast with that id already exists, Shards UI updates it in place, refreshes the auto-dismiss timer, and increments updateKey. The styled toast replays a short re-notify animation on each update.

Toast.toastManager.add({
  id: "save-status",
  title: "Saved",
  description: "Your draft was updated.",
});

Anchored Toasts

For toasts positioned relative to an element, use Toast.anchoredToastManager. Add Toast.AnchoredProvider to your app layout so components can use the manager directly.

Toast.anchoredToastManager.add({
  title: "Copied!",
  positionerProps: {
    anchor: button,
  },
});

Style an anchored toast like a tooltip with data: { tooltipStyle: true }. Tooltip style displays only the title.

Toast.anchoredToastManager.add({
  title: "Copied!",
  positionerProps: {
    anchor: button,
  },
  data: {
    tooltipStyle: true,
  },
});

API Reference

Toast.Provider

Provider component for stacked toasts. Wraps Toast.Provider from Shards UI and renders the COSS toast stack.

Toast.AnchoredProvider

Provider component for toasts anchored to elements. Use it with Toast.anchoredToastManager.

Toast.toastManager

Manager for stacked toasts. Use Toast.toastManager.add() to show a toast. A later add with the same id updates the existing toast instead of stacking a duplicate. Use close(id) to dismiss one toast, close() to dismiss all toasts, and promise() to update a loading toast from a promise result.

Toast.anchoredToastManager

Manager for anchored toasts. Pass positionerProps.anchor to add(). Repeated calls with the same id update the existing toast.

Toast.ToastPrimitive.Viewport

Viewport container for toasts. The COSS-styled providers render Shards UI’s Toast.Viewport internally. Use Toast.ToastPrimitive.Viewport for a custom lower-level composition.

Toast.ToastPrimitive.Root

Individual toast container. The COSS-styled providers render Shards UI’s Toast.Root internally. Use Toast.ToastPrimitive.Root for a custom lower-level composition.

Toast.ToastPrimitive.Title

Title text for the toast. The providers render Toast.ToastPrimitive.Title from each manager record’s title value.

Toast.ToastPrimitive.Description

Description text for the toast. The providers render Toast.ToastPrimitive.Description from each manager record’s description value.

Toast.ToastPrimitive.Action

Action button for the toast. Set actionProps when adding a toast; the providers render the action with the COSS small-button style through Toast.ToastPrimitive.Action.

Toast.ToastPrimitive.Close

Close control for a custom toast composition. Use Toast.ToastPrimitive.Close, or call Toast.toastManager.close(id) and Toast.anchoredToastManager.close(id) from application logic.

See the Shards Toast API for manager options, swipe behavior, priority, focus management, and primitive props.

Examples

With Status

Loading

With Action

Promise

With Varying Heights

Copy Button with Anchored Toast

Submit Button with Error Toast