EXEPERTAI LAB

Research alpha

Time Machine
EXEPERTAI LAB
GALLERY / COLLECTION
← Browse Astryx gallery
Toast·hook·@astryxdesign/core

useToast

Hook for showing toast notifications from anywhere in your component tree. Returns a function that accepts toast options and shows the notification. Works automatically with LayerProvider or self-mounts a fallback viewport.

Open in Playground @astryxdesign/core/Toast

Signature

Call shape
useToast(): ShowToastFn
Returns
NameType and behavior
showToast(options: ToastOptions) => () => void
Show a toast notification. Returns a dismiss function. Options include body (ReactNode), type ("info" | "error"), isAutoHide, autoHideDuration, endContent, uniqueID, and collisionBehavior.

Showcases and examples

1 documented example

Toast

Imperative toast notifications triggered with useToast and rendered in the toast viewport.

Preview loads on approachPreview loads on approach
Exact source · toast-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

// In production, use useToast() hook for proper positioning, stacking, and lifecycle.

import {Toast} from '@astryxdesign/core/Toast';
import {useToast} from '@astryxdesign/core/Toast';
import {Button} from '@astryxdesign/core/Button';

export default function ToastShowcase() {
  const toast = useToast();
  return (
    <Toast
      type="info"
      body="Document saved successfully"
      endContent={
        <Button
          label="Show toast"
          variant="ghost"
          size="sm"
          onClick={() => toast({body: 'Document saved successfully'})}
        />
      }
      isAutoHide={false}
      autoHideDuration={5000}
      isExiting={false}
      onDismiss={() => {}}
    />
  );
}

Usage

Hook for showing toast notifications from anywhere in your component tree. Returns a function that accepts toast options and shows the notification. Works automatically with LayerProvider or self-mounts a fallback viewport.

  • Use for transient success/error feedback that does not require user action.
  • Set uniqueID to deduplicate toasts from rapid user actions.
  • Use for critical errors that require acknowledgment; use AlertDialog instead.
  • Call useToast in the same component that renders LayerProvider; it must be called from a child component inside the provider.