Toast

A brief notification that appears temporarily.

Installation

CLI

Install the component using the StarUI CLI:

star add toast

Examples

Variants

All six visual styles — success, error, warning, info, default, and destructive — with realistic microcopy.

Duration

Control how long toasts stay visible. Set duration=0 for errors that require acknowledgment.

Stacking

Toasts queue automatically — the oldest is replaced when the stack is full.

Position

Use the position prop on Toaster to control where toasts appear.

Server-Side (SSE)

Trigger toasts from Python server code using ToastQueue — ideal for background tasks, deployments, and form processing.

Usage

Place the Toaster component once in your root layout. Use toast() for instant client-side feedback, or ToastQueue in SSE routes for server-driven notifications.

from components.toast import Toaster, toast

# Place Toaster once in your layout
Toaster()

# Client-side — trigger from any button
Button("Save", data_on_click=toast.success("Profile updated", "Name and email saved."))

# Server-side — trigger from an SSE route
from components.toast import ToastQueue

@rt("/process")
@sse
async def process():
    t = ToastQueue()
    yield t.success("Done", "Report generated successfully")

API Reference

Props

Prop	Type	Default	Description
`position`	`ToastPosition`	`'bottom-right'`	Where toasts appear on screen
`max_visible`	`int`	`3`	Maximum number of toasts shown at once
`cls`	`str`	`''`	Additional CSS classes for the toast container
`duration`	`int`	`4000`	Auto-dismiss delay in milliseconds (0 to disable)
`variant`	`ToastVariant`	`'default'`	Visual style — 'default', 'success', 'error', 'warning', 'info', 'destructive'

Component	Description
`Toaster`	Fixed-position container — place once in your layout
`toast`	Client-side helper — returns JS expressions for data_on_click
`toast.success / .error / .warning / .info / .destructive`	Variant shortcuts — toast.success(title, description, duration)
`ToastQueue`	Server-side toast manager for SSE routes — call .show() and return the result