Toast
Non-blocking notification messages with auto-dismiss and variant styles.
Default
The default toast preview focuses on the interaction developers actually care about: triggering a notification and seeing its baseline behavior.
tsx
<ToastProvider>
<Button
variant="secondary"
onClick={() =>
toast({
variant: "info",
title: "New update available",
description: "A new version is ready to install.",
})
}
>
Show toast
</Button>
</ToastProvider>Installation
tsx
import { ToastProvider, useToast } from "madagent";Placement Controls
tsx
<ToastProvider position={activePosition}>
<PlacementControlsContent onPositionChange={setActivePosition} />
</ToastProvider>Variants
Toast variants are easier to iterate on one at a time because each one changes tone, iconography, and urgency.
Success
tsx
<ToastProvider>
<Button
variant="primary"
onClick={() =>
toast({
variant: "success",
title: "Saved successfully",
description: "Your changes have been saved.",
})
}
>
Success
</Button>
</ToastProvider>Error
tsx
<ToastProvider>
<Button
variant="danger"
onClick={() =>
toast({
variant: "error",
title: "Something went wrong",
description: "Please try again later.",
})
}
>
Error
</Button>
</ToastProvider>Warning
tsx
<ToastProvider>
<Button
variant="secondary"
onClick={() =>
toast({
variant: "warning",
title: "Warning",
description: "Your session is about to expire.",
})
}
>
Warning
</Button>
</ToastProvider>Info
tsx
<ToastProvider>
<Button
variant="outline"
onClick={() =>
toast({
variant: "info",
title: "New update available",
description: "A new version is ready to install.",
})
}
>
Info
</Button>
</ToastProvider>Title Only
tsx
<Button
variant="secondary"
onClick={() => toast({ variant: "success", title: "Item deleted" })}
>
Title only toast
</Button>Persistent
tsx
<Button
variant="outline"
onClick={() =>
toast({
variant: "info",
title: "Persistent notification",
description: "This won't auto-dismiss. Click X to close.",
duration: 0,
})
}
>
Persistent toast
</Button>API Reference
Provider Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top-right""top-left""bottom-right""bottom-left""top-center""bottom-center" | "bottom-right" | Position of the toast container |
maxToasts | number | 5 | Maximum number of visible toasts |
Toast Options
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "success""error""warning""info" | "info" | Visual variant |
title | string | - | Toast title |
description | string | - | Toast description text |
duration | number | 5000 | Auto-dismiss duration in ms (0 = no auto-dismiss) |
dismissible | boolean | true | Show dismiss button |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
tsx
<div dir="rtl">
<ToastProvider position="bottom-left">
<Button variant="secondary">عرض إشعار</Button>
</ToastProvider>
</div>