Components

Toast

Action-triggered feedback message in a fixed position

Use Toast to show short feedback after a user action (e.g. “Copied”, “Saved”). Toasts should appear in a fixed corner (e.g. bottom-right), not inline in the flow. Use the position prop so the toast floats in place.

Show on action

Click the button to see a toast appear in the bottom-right corner:

<ToastDemo client:load variant="success" message="Copied!" buttonLabel="Show toast" />

Variants

Use position="bottom-right" (or top-right, bottom-left, top-left) so the toast appears in a corner. Click each button to see that variant in the bottom-right:

Props

Toast

variant'default' | 'success' | 'warning' | 'error'default: 'default'

Visual style

position'inline' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'default: 'inline'

When not inline, the toast is rendered in a fixed corner. Use for action-triggered feedback.

classNamestring

Additional CSS classes

ToastDemo (docs)

variant'default' | 'success' | 'warning' | 'error'default: 'success'

Toast style

messagestringdefault: 'Copied!'

Text shown in the toast

buttonLabelstringdefault: 'Show toast'

Button label

ToastIcon

variant'default' | 'success' | 'warning' | 'error'default: 'default'

Icon style (success shows check, warning shows triangle, error shows X)

classNamestring

Additional CSS classes