Toast

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

import type { ComponentPropsWithRef } from "react";
 
import { Button, Toast, ToastTitle, toaster } from "@optiaxiom/react";
 
export function App({
  colorScheme,
}: Pick<ComponentPropsWithRef<typeof Toast>, "colorScheme">) {
  return (
    <Button
      onClick={() =>
        toaster.create(
          <Toast colorScheme={colorScheme}>
            <ToastTitle>This is an example toast message.</ToastTitle>
          </Toast>,
        )
      }
    >
      Create Toast
    </Button>
  );
}

import {
  Button,
  Flex,
  Text,
  Toast,
  ToastAction,
  ToastTitle,
  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 w="144">Task is {status}</Text>
 
      <Button
        appearance="danger-outline"
        disabled={status === "deleted"}
        icon={<IconTrash />}
        onClick={() => {
          setStatus("deleted");
          toaster.create(
            <Toast>
              <ToastTitle>Task Deleted</ToastTitle>
              <ToastAction
                altText="Undo"
                onClick={() => setStatus("in-progress")}
              >
                Undo
              </ToastAction>
            </Toast>,
          );
        }}
      >
        Delete
      </Button>
 
      <Button
        disabled={status !== "deleted"}
        onClick={() => setStatus("in-progress")}
      >
        Restore
      </Button>
    </Flex>
  );
}