Toast

Transient notification with success, warn, error, and info variants. Use Toast for the visual, and ToastProvider to queue, position, and dismiss them.

Your changes have been saved.
A new version is available.
ToastExamples.tsrx
import { Toast } from "@octaneui/core";
import {
  CircleCheck,
  CircleX,
  Info,
  TriangleAlert,
  X,
} from "@octaneui/icons/lucide";

export function ToastExamples() @{
  <div class="stack">
    <Toast variant="success" left={<CircleCheck size={16} />}>
      Your changes have been saved.
    </Toast>
    <Toast variant="warn" left={<TriangleAlert size={16} />}>
      Your session expires in 5 minutes.
    </Toast>
    <Toast variant="error" left={<CircleX size={16} />}>
      Could not connect to the server.
    </Toast>
    <Toast variant="info" left={<Info size={16} />} right={<X size={16} />}>
      A new version is available.
    </Toast>

    <style>
      .stack {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
      }
    </style>
  </div>
}

Provider

Wrap the tree in ToastProvider, then call useToast() to push notifications. Default duration is 4s; pass duration=0 to keep a toast until it is dismissed. contained positions the stack inside this preview instead of the viewport.

ToastProviderExample.tsrx
import { Button, ToastProvider, useToast } from "@octaneui/core";
import {
  CircleCheck,
  CircleX,
  Info,
  TriangleAlert,
} from "@octaneui/icons/lucide";

export function ToastProviderExample() @{
  <ToastProvider position="bottom right" contained>
    <ToastTriggers />
  </ToastProvider>
}

function ToastTriggers() @{
  const { toast } = useToast();

  <div class="actions">
    <Button
      onClick={() =>
        toast({
          variant: "success",
          left: <CircleCheck size={16} />,
          children: "Your changes have been saved.",
        })
      }
    >
      Success
    </Button>
    <Button
      onClick={() =>
        toast({
          variant: "warn",
          left: <TriangleAlert size={16} />,
          children: "Your session expires in 5 minutes.",
        })
      }
    >
      Warn
    </Button>
    <Button
      onClick={() =>
        toast({
          variant: "error",
          left: <CircleX size={16} />,
          children: "Could not connect to the server.",
        })
      }
    >
      Error
    </Button>
    <Button
      onClick={() =>
        toast({
          variant: "info",
          left: <Info size={16} />,
          children: "A new version is available.",
          duration: 0,
        })
      }
    >
      Sticky info
    </Button>

    <style>
      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
      }
    </style>
  </div>
}