Toast

A single transient notification.

ToastProps packages/core/src/extra-controls.ts:904 ↗

Import

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

Usage

Toast.tsx

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

<Toast
  id="saved"
  variant="success"
  title="Changes saved"
  description="Everything is up to date."
  action={{ label: "Undo", onClick: () => console.log("undo") }}
  onDismiss={(id) => console.log("dismissed", id)}
/>

Props

Prop	Type	Default
`id` required	`string`	—
`title` required	`string`	—
`action`	`ToastAction`	—
`description`	`string`	—
`onDismiss`	`(id: string) => void`	—
`variant`	`ToastVariant`	`"default"`

Common props

Shared by every component. See descriptions →

childrenhighlightkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

ToastAction

interface ToastAction {
  label: string;
  onClick: () => void;
}

ToastVariant

type ToastVariant = "default" | "success" | "destructive";