Toast
Single transient notification rendered inside the `Toaster` viewport. Use `variant` to convey intent (`default`, `success`, `error`, `warning`, `info`); pair…
Single transient notification rendered inside the <Toaster> viewport. Use variant to convey intent (default, success, error, warning, info); pair with <ToastTitle> and <ToastDescription> for structured content, or wrap a <ToastAction> for a single inline call-to-action. Most apps will trigger toasts imperatively via the useToast hook rather than mounting <Toast> directly.
import { Toast } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
description | Optional | string | undefined | — | — |
variant | Optional | NotificationVariant | undefined | — | — |
icon | Optional | React.JSX.Element | undefined | — | — |
Usage
Transient notifications shown in a corner of the viewport, built on Radix UI.
The simplest path is <Toaster> (Provider + Viewport in one) wrapping a
list of <Toast> elements.
Toaster props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
children | ReactNode | yes | — | The <Toast> elements to render. |
position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | no | "top-left" | Where the viewport is anchored. |
All other ToastProvider props are forwarded.
Toast props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
title | string | yes | — | Title shown at the top of the toast. |
description | string | no | — | Optional body text. |
variant | "success" | "error" | "warning" | "info" | no | "info" | Determines the icon and accent. |
icon | JSX.Element | no | — | Override the default variant icon. |
open | boolean | no | — | Controlled open state. |
onOpenChange | (open: boolean) => void | no | — | Open-state change handler. |
duration | number | no | — | Auto-dismiss after N ms. |
Notes
- The compound parts (
ToastProvider,ToastViewport) are available for fine-grained control; most code should stick to<Toaster>. - Place exactly one
<Toaster>in your app root.
Example
/** * Runnable example for Toast / Toaster. */import { useState } from 'react'import { Button, Toast, Toaster } from '@tetherto/mdk-react-devkit'export const ToastExample = () => { const [open, setOpen] = useState(false) return ( <> <Button variant="primary" onClick={() => setOpen(true)}> Show toast </Button> <Toaster position="bottom-right"> <Toast open={open} onOpenChange={setOpen} title="Saved" description="Your changes were saved successfully." variant="success" duration={3000} /> </Toaster> </> )}