Skip to main content
On this pageFunctions

Ui/Toast

Functions

make

functionsource

Types

EntryHandlers

typesource
/**
 * Handlers passed to `entryToView`. Spread `dismiss` onto a close
 *  button's attribute array (typically inside `h.button([...dismiss])`)
 *  to let users dismiss the entry manually. The attribute carries the
 *  Toast's dismiss handler bound to this entry's id; it routes through
 *  the Toast boundary's wrap chain at click time.
 */
type EntryHandlers = Readonly<{
  dismiss: ReadonlyArray<ChildAttribute>
}>

InitConfig

typesource
/**
 * Configuration for creating a toast container model. `defaultDuration` is
 *  applied to any `show()` call that doesn't provide its own `duration` or
 *  pass `sticky: true`. Accepts any Effect Duration input; a bare number is
 *  interpreted as milliseconds.
 */
type InitConfig = Readonly<{
  defaultDuration: Duration.Input
  id: string
}>

ShowInput

typesource
/**
 * Input for `show()`. `payload` is the consumer-defined content shape for an
 *  entry. Omit `duration` to use the container's `defaultDuration`; pass
 *  `sticky: true` to skip auto-dismiss entirely.
 */
type ShowInput = Readonly<{
  duration: Duration.Input
  payload: A
  sticky: boolean
  variant: Variant
}>

Constants

DismissAfter

constsource
/**
 * Schedules an auto-dismiss timer for an entry. The result Message carries a
 *  version so stale timers (from hover or manual dismiss) are discarded in
 *  the update function. Static. The Command definition doesn't depend on
 *  payload.
 */
const DismissAfter: CommandDefinitionWithArgs<"DismissAfter", {
  duration: DurationFromMillis
  entryId: String
  version: Number
}, Effect<{
  _tag: "ElapsedDuration"
  entryId: string
  version: number
}, never, never>>

Dismissed

constsource
/**
 * Sent when an entry should begin dismissing. Starts the leave animation;
 *  the entry is removed from the stack when `TransitionedOut` fires.
 */
const Dismissed: CallableTaggedStruct<"Dismissed", {
  entryId: String
}>

DismissedAll

constsource
/** Sent when every currently-visible entry should begin dismissing. */
const DismissedAll: CallableTaggedStruct<"DismissedAll", {}>

ElapsedDuration

constsource
/**
 * Sent when an entry's auto-dismiss timer fires. Carries a version echoed
 *  from the scheduling moment so stale timers (from hover or manual dismiss)
 *  are discarded.
 */
const ElapsedDuration: CallableTaggedStruct<"ElapsedDuration", {
  entryId: String
  version: Number
}>

GotAnimationMessage

constsource
/** Wraps a single entry's Animation submodel message for delegation. */
const GotAnimationMessage: CallableTaggedStruct<"GotAnimationMessage", {
  entryId: String
  message: Union<[CallableTaggedStruct<"Showed", {}>, CallableTaggedStruct<"Hid", {}>, CallableTaggedStruct<"AdvancedAnimationFrame", {}>, CallableTaggedStruct<"EndedAnimation", {}>]>
}>

HoveredEntry

constsource
/**
 * Sent when the pointer enters an entry. Pauses the auto-dismiss timer by
 *  advancing the entry's version.
 */
const HoveredEntry: CallableTaggedStruct<"HoveredEntry", {
  entryId: String
}>

LeftEntry

constsource
/**
 * Sent when the pointer leaves an entry. Restarts the auto-dismiss timer
 *  with the entry's full duration.
 */
const LeftEntry: CallableTaggedStruct<"LeftEntry", {
  entryId: String
}>

Position

constsource
/** Where the toast viewport is anchored on the screen and how entries stack. */
const Position: Literals<readonly ["TopLeft", "TopCenter", "TopRight", "BottomLeft", "BottomCenter", "BottomRight"]>

Variant

constsource
/**
 * Semantic category of a toast. Drives the default ARIA role: `status` for
 *  `Info` / `Success`, `alert` for `Warning` / `Error`. Also surfaced as
 *  `data-variant` on each entry for per-variant CSS. This is the only
 *  content-adjacent field the component owns. The rest of the entry's
 *  content lives in the user-provided payload.
 */
const Variant: Literals<readonly ["Info", "Success", "Warning", "Error"]>

Stay in the update loop.

New releases, patterns, and the occasional deep dive.


Built with Foldkit.

© 2026 Devin Jameson