Toast

Displays a transient notification queued by the imperative toast() function.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { Button, toast, Toaster } from "@aile.sh/elia";

export function Example() {
  const save = () =>
    toast.promise(new Promise((resolve) => setTimeout(resolve, 1500)), {
      loading: "Saving draft…",
      success: "Draft saved",
      error: "Save failed",
    });
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="secondary" onClick={() => toast("Draft saved")}>Neutral</Button>
      <Button variant="secondary" onClick={() => toast("Key rotated", { tone: "green" })}>Green</Button>
      <Button variant="secondary" onClick={() => toast("Sync failed", { tone: "red" })}>Red</Button>
      <Button variant="secondary" onClick={save}>Promise</Button>
      <Toaster />
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia