Toast · Astryx

Toast@astryxdesign/core v0.1.1 · Toast

Usage

Toast shows a brief, non-blocking notification to confirm an action or present temporary information. Use it for scenarios where the user needs feedback but not a decision, such as saving, deleting, or changing a status.

For production use, prefer the useToast() hook; it handles positioning, stacking, auto-dismiss, and deduplication via ToastViewport. The Toast component renders the visual toast element inline and is useful for previews, documentation, and static showcases where the viewport lifecycle is not needed.

ts
import {Toast} from '@astryxdesign/core/Toast'

Best practices

Guidance	Practices
Do	Keep messages short: only a few words that tell the user what happened, like "Changes saved" or "Message sent".
Do	Add an undo action in the endContent slot for reversible operations like deleting an item, so the user can recover without navigating away.
Do	Use uniqueID to deduplicate toasts that fire from repeated actions, like clicking a save button multiple times.
Do	Use error type for failures that need attention but not immediate action; it persists until dismissed so the user won't miss it.
Don't	Don't use a toast for critical errors that block the user. Use Banner for persistent, in-context messaging that requires acknowledgment.
Don't	Don't put long or multi-line content in a toast; it disappears after 5 seconds and the user may not finish reading.
Don't	Don't show form validation errors as toasts. Use inline field validation so the user can see exactly which field needs fixing.

Examples

Common configurations, variations, and states.

Toast — Action

Open in Playground

Persistent toasts with a trailing button or link so the user can act on the notification, like undoing a delete or viewing a report.

Toast — Deduplication

Open in Playground

Prevent duplicate toasts with uniqueID. Use ignore to keep the first toast, or overwrite to replace it with updated content like a progress percentage.

Toast — Dismiss

Open in Playground

Show a persistent toast and dismiss it programmatically using the function returned by useToast. Use for long-running operations that need manual cleanup.

Toast — Stacking

Open in Playground

Multiple toasts stacking vertically with smooth enter and exit animations. Click repeatedly to see how toasts queue and dismiss.

Toast — Types

Open in Playground

Info and error toast variants side by side. Info toasts auto-dismiss after 5 seconds, error toasts persist until the user dismisses them.

Usage

import {Toast} from '@astryxdesign/core/Toast'

Best practices

Guidance	Practices
Do	Keep messages short: only a few words that tell the user what happened, like "Changes saved" or "Message sent".
Do	Add an undo action in the endContent slot for reversible operations like deleting an item, so the user can recover without navigating away.
Do	Use uniqueID to deduplicate toasts that fire from repeated actions, like clicking a save button multiple times.
Do	Use error type for failures that need attention but not immediate action; it persists until dismissed so the user won't miss it.
Don't	Don't use a toast for critical errors that block the user. Use Banner for persistent, in-context messaging that requires acknowledgment.
Don't	Don't put long or multi-line content in a toast; it disappears after 5 seconds and the user may not finish reading.
Don't	Don't show form validation errors as toasts. Use inline field validation so the user can see exactly which field needs fixing.