Toast

"use client";
 
import { Button, toaster } from "@optiaxiom/react";
 
export function App() {
  return (
    <Button onClick={() => toaster.create("This is an example toast message.")}>
      Create Toast
    </Button>
  );
}

"use client";
 
import { Button, Flex, toaster } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row" flexWrap="wrap">
      {(
        ["danger", "information", "neutral", "success", "warning"] as const
      ).map((intent) => (
        <Button
          key={intent}
          onClick={() =>
            toaster.create("This is an example toast message.", { intent })
          }
        >
          {intent} toast
        </Button>
      ))}
    </Flex>
  );
}

"use client";
 
import { Button, Flex, Text, toaster } from "@optiaxiom/react";
import { IconTrash } from "@tabler/icons-react";
import { useState } from "react";
 
export function App() {
  const [status, setStatus] = useState("in-progress");
 
  return (
    <Flex flexDirection="row">
      <Text>Task {status}</Text>
 
      <Button
        appearance="danger-outline"
        disabled={status === "deleted"}
        icon={<IconTrash />}
        onClick={() => {
          setStatus("deleted");
          toaster.create("Task Deleted", {
            action: "Undo",
            onAction: () => setStatus("in-progress"),
          });
        }}
      >
        Delete
      </Button>
 
      <Button
        disabled={status !== "deleted"}
        onClick={() => setStatus("in-progress")}
      >
        Restore
      </Button>
    </Flex>
  );
}

"use client";
 
import { Button, toaster } from "@optiaxiom/react";
 
export function App() {
  return (
    <Button
      onClick={async () => {
        const id = toaster.create("Saving task");
        // simulate network request
        await new Promise((resolve) => setTimeout(resolve, 3_000));
        toaster.remove(id);
        toaster.create("Could not save task", { intent: "danger" });
      }}
    >
      Create Toast
    </Button>
  );
}