Toaster
Top-level provider + viewport that hosts every toast triggered via `useToast`. Mount once near the root of your app (typically inside `MdkProvider`). Without…
Top-level provider + viewport that hosts every toast triggered via useToast. Mount once near the root of your app (typically inside <MdkProvider>). Without a <Toaster> in the tree, useToast calls are no-ops. Position and visual stacking are controlled by CSS tokens; no props are required for the default bottom-right placement.
import { Toaster } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
position | Optional | ToastPosition | 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> </> )}