Toast

PreviousNext

Transient notification. Prefer toast() with a mounted Toaster; static previews wrap Toast in ToastProvider.

import { Toaster, toast, Button } from "@/rl-ui";

<>
<Toaster />
<Button
  variant="primary"
  onClick={() =>
    toast({
      variant: "success",
      title: "Saved",
      description: "Changes published.",
    })
  }
>
  Notify
</Button>
</>

Examples

Variants

Toast must sit under ToastProvider with a ToastViewport (or use toast() + Toaster).

import { Toast, ToastProvider, ToastViewport } from "@/rl-ui";

<ToastProvider>
<Toast variant="info" title="Info" description="Heads up." open duration={1_000_000} />
<Toast variant="success" title="Success" description="Done." open duration={1_000_000} />
<Toast variant="warning" title="Warning" description="Check this." open duration={1_000_000} />
<Toast variant="error" title="Error" description="Failed." open duration={1_000_000} />
<ToastViewport className="rl-toast-viewport-inline" />
</ToastProvider>

Imperative toast()

Mount Toaster once (e.g. at app root), then call toast() from handlers.

Code-only example (no live preview).
import { Toaster, toast, Button } from "@/rl-ui";

<>
<Toaster />
<Button
  onClick={() =>
    toast({ variant: "info", title: "Hello", description: "From toast()." })
  }
>
  Show toast
</Button>
</>

API

PropTypeDefaultDescription
variant"info" | "success" | "warning" | "error""info"Toast tone.
layout"action-button" | "action-link" | "inline""action-link"Action layout.
titleReactNode—Toast title.
descriptionReactNode—Supporting copy.
durationnumber5000Auto-dismiss ms (use a large value for static previews).
actionReactNode—Optional action.
openboolean—Controlled open state.