import { Toast } from "@nodus/design-system"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "success" | "error" | "warning" | "info" | "default" | Visual style and icon |
title | string | — | Toast heading |
description | string | — | Toast body text |
action | ReactNode | — | Action element (e.g. undo button) |
onClose | () => void | — | Close handler — shows dismiss button when provided |
variantType
"default" | "success" | "error" | "warning" | "info"Default "default"Visual style and icon
titleType
stringDefault —Toast heading
descriptionType
stringDefault —Toast body text
actionType
ReactNodeDefault —Action element (e.g. undo button)
onCloseType
() => voidDefault —Close handler — shows dismiss button when provided
MobileTouch Target
Toast dismiss button requires 44px tap target. On mobile, toasts render full-width at the bottom of the viewport. Action buttons inside toasts must also meet the 44px minimum.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?