Toast

import { Button, Toast } from "innate-ui";
import { Icon } from "@/docs/icons/Icon";

export function ToastDemo() {
  const { showToast } = Toast.useToast();

  const showNotification = () => {
    void showToast({
      content: (
        <>
          <Toast.Icon>
            <Icon name="statusSuccess" />
          </Toast.Icon>
          <Toast.Content>
            <strong>Toast created</strong>
            <span>This is a toast notification.</span>
          </Toast.Content>
        </>
      ),
      duration: 4000,
      tone: "success",
    });
  };

  return <Button onClick={showNotification}>Give me a toast</Button>;
}