Toast
Feedback

Toast

Transient confirmation card, used for acknowledgment of completed actions.

Component behavior

Toast displays temporary feedback after an action. Required information must remain available elsewhere after dismissal.

Use cases
  • Feedback after actions such as saving, queueing, or copying.
  • Background-operation results.
  • Undo for a reversible action.
Alternatives

Banner: a condition persists across the page.

Callout: a message must remain beside specific content.

AlertDialog: an action requires confirmation before execution.

Notification: messages need persistent history.

Props

Toast extends HTMLAttributes<HTMLDivElement>. For the managed stack with timers and placement, see ToastProvider.

ToastProps props
PropTypeDefaultDescription
childrenReactNode—Toast message.
toneToastTone"ok""ok" | "warn" | "err".
hrefstring—Makes the link label a clickable anchor.
linkLabelstring"View"Link text when href is provided.
onClose() => void—Shows a dismiss button and calls this on click.

Examples

Tones

Toast tones

With link

Toast with link

Dismissible

Toast with close button

With link and close

Toast with link and close
ImportTSX
import { Toast } from "@solarius/onset";
import type { ToastTone } from "@solarius/onset";

<Toast tone="ok" onClose={dismissToast}>
  Changes saved successfully
</Toast>;