> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Show Toast
> Display a notification from any UI interaction.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
`ShowToast` displays a brief notification. It's a client-side action — no server round-trip — so feedback is instant. Fire it directly from a button click, or use it as a `CallTool` callback to report success or failure after a server action completes.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Button, Row
from prefab_ui.actions import ShowToast
with Row(gap=2):
Button("Notify", on_click=ShowToast("Something happened"))
Button("Warn me", variant="outline",
on_click=ShowToast("Improbability levels rising", variant="warning"))
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-2",
"type": "Row",
"children": [
{
"type": "Button",
"label": "Notify",
"variant": "default",
"size": "default",
"disabled": false,
"onClick": {"action": "showToast", "message": "Something happened"}
},
{
"type": "Button",
"label": "Warn me",
"variant": "outline",
"size": "default",
"disabled": false,
"onClick": {
"action": "showToast",
"message": "Improbability levels rising",
"variant": "warning"
}
}
]
}
}
```
## Variants
The `variant` parameter controls the toast's visual style. Omit it for a neutral default.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Button, Row
from prefab_ui.actions import ShowToast
with Row(gap=2, css_class="flex-wrap"):
Button("Default", variant="outline",
on_click=ShowToast("Something happened"))
Button("Success", variant="success",
on_click=ShowToast("Towel registered", variant="success"))
Button("Error", variant="destructive",
on_click=ShowToast("Towel not found", variant="error"))
Button("Warning", variant="warning",
on_click=ShowToast("Improbability drive unstable", variant="warning"))
Button("Info", variant="info",
on_click=ShowToast("42 towels in inventory", variant="info"))
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-2 flex-wrap",
"type": "Row",
"children": [
{
"type": "Button",
"label": "Default",
"variant": "outline",
"size": "default",
"disabled": false,
"onClick": {"action": "showToast", "message": "Something happened"}
},
{
"type": "Button",
"label": "Success",
"variant": "success",
"size": "default",
"disabled": false,
"onClick": {"action": "showToast", "message": "Towel registered", "variant": "success"}
},
{
"type": "Button",
"label": "Error",
"variant": "destructive",
"size": "default",
"disabled": false,
"onClick": {"action": "showToast", "message": "Towel not found", "variant": "error"}
},
{
"type": "Button",
"label": "Warning",
"variant": "warning",
"size": "default",
"disabled": false,
"onClick": {
"action": "showToast",
"message": "Improbability drive unstable",
"variant": "warning"
}
},
{
"type": "Button",
"label": "Info",
"variant": "info",
"size": "default",
"disabled": false,
"onClick": {"action": "showToast", "message": "42 towels in inventory", "variant": "info"}
}
]
}
}
```
## Description Text
Add a secondary line with the `description` parameter for toasts that need more context.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Button
from prefab_ui.actions import ShowToast
Button(
"Deploy",
on_click=ShowToast(
"Deployment complete",
description="3 agents online",
variant="success",
),
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "Button",
"label": "Deploy",
"variant": "default",
"size": "default",
"disabled": false,
"onClick": {
"action": "showToast",
"message": "Deployment complete",
"description": "3 agents online",
"variant": "success"
}
}
}
```
## Duration
By default the host decides how long toasts persist. Override with `duration` (in milliseconds):
```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
ShowToast("Quick flash", duration=1500)
ShowToast("Read this carefully", duration=10000)
```
## As CallTool Callbacks
The most common pattern: use `ShowToast` as `on_success` and `on_error` callbacks on a `CallTool` to give feedback after a server action completes.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Button, Row
from prefab_ui.actions import ShowToast
with Row(gap=2):
Button("Success callback", variant="success",
on_click=ShowToast("Saved successfully!", variant="success"))
Button("Error callback", variant="destructive",
on_click=ShowToast("Could not save: connection timed out", variant="error"))
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-2",
"type": "Row",
"children": [
{
"type": "Button",
"label": "Success callback",
"variant": "success",
"size": "default",
"disabled": false,
"onClick": {"action": "showToast", "message": "Saved successfully!", "variant": "success"}
},
{
"type": "Button",
"label": "Error callback",
"variant": "destructive",
"size": "default",
"disabled": false,
"onClick": {
"action": "showToast",
"message": "Could not save: connection timed out",
"variant": "error"
}
}
]
}
}
```
Wire these onto a `CallTool` with `on_success` and `on_error`. The `{{ $error }}` variable captures the error message from the server.
```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.rx import Rx
item = Rx("item")
Button(
"Save",
on_click=CallTool(
"save_item",
arguments={"data": item},
on_success=ShowToast("Saved successfully!", variant="success"),
on_error=ShowToast("{{ $error }}", variant="error"),
),
)
```
## API Reference
Toast message text. Can be passed as a positional argument. Supports `{{ key }}` interpolation.
Optional secondary text displayed below the message.
Visual style of the toast.
Auto-dismiss duration in milliseconds. When omitted, the host decides.
## Protocol Reference
```json ShowToast theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"action": "showToast",
"message": "string (required)",
"description?": "string",
"variant?": "default | success | error | warning | info",
"duration?": "number"
}
```
For the complete protocol schema, see [ShowToast](/protocol/show-toast).