Toaster

Stacks and positions a list of toasts you control.

Render-driven toaster: callers own the toast array and remove items in onDismiss.

ToasterProps packages/core/src/extra-controls.ts:973 ↗

Import

import { Toaster } from "@tarve/core";

Usage

Toaster.tsx

import { Button, Column, Toaster, type ToastItem } from "@tarve/core";

let toasts: ToastItem[] = [];

<Column>
  <Button
    onClick={() => {
      toasts = [...toasts, { id: String(Date.now()), title: "Exported", description: "report.pdf is ready." }];
    }}
  >
    Export
  </Button>
  <Toaster
    toasts={toasts}
    position="bottom-right"
    onDismiss={(id) => {
      toasts = toasts.filter((toast) => toast.id !== id);
    }}
  />
</Column>

Props

Prop	Type	Default
`toasts` required	`ToastItem[]`	—
`onDismiss`	`(id: string) => void`	—
`position`	`ToasterPosition`	`"bottom-right"`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

ToastItem

interface ToastItem {
  id: string;
  title: string;
  description?: string;
  variant?: ToastVariant;
  action?: ToastAction;
}

ToasterPosition

type ToasterPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";