Toast

Basic toast example demonstrating core behavior.

Package: @solidiom/toast
Version: 0.0.1-next.0
Status: stable

Examples

import * as Toast from "@solidiom/toast"
import { createEffect } from "solid-js"

const toaster = Toast.createToaster({ max: 3, defaultDuration: 5000 })

;<div>
  <button
    onClick={() =>
      toaster.toast({
        title: "Saved",
        description: "Your changes have been saved.",
      })
    }
  >
    Show toast
  </button>

  <Toast.Region toaster={toaster}>
    {(toasts) =>
      toasts().map((entry) => (
        <Toast.Root toastId={entry.id}>
          <Toast.Title>{entry.title}</Toast.Title>
          {entry.description && <Toast.Description>{entry.description}</Toast.Description>}
          <Toast.Close>×</Toast.Close>
        </Toast.Root>
      ))
    }
  </Toast.Region>
</div>

The createToaster function returns a { toast, dismiss, toasts } API for programmatic queue management. The Region handles auto-dismiss timers and pause-on-hover. Omit the children render function for default rendering with Title, Description, and Close.

View source

        /**
 * @solidiom/toast — Headless toast notification primitive.
 *
 * Parts: Region, Root, Title, Description, Close.
 * API: createToaster() for programmatic queue control.
 */

export {
  createToaster,
  Region,
  Root,
  Title,
  Description,
  Close,
  type ToasterOptions,
  type ToasterApi,
  type ToastRegionProps,
  type ToastRootProps,
  type ToastTitleProps,
  type ToastDescriptionProps,
  type ToastCloseProps,
} from "./toast"

export type { ToastEntry, ToastContextValue } from "./toast-context"