Toast

() => {
  const { setToast } = useToasts();
  return (
    <Button
    onClick={() => {
    setToast({
      text: "The Evil Rabbit jumped over the fence.",
      delay: 3000,
        });
      }}
    >
      Show Toast
    </Button>
  );
}

() => {
  const { setToast } = useToasts();
  return (
    <Button
    onClick={() => {
    setToast({
      text: "HTTP is a protocol which allows the fetching of resources, such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more.",
        });
      }}
    >
      Show Toast
    </Button>
  );
}

() => {
  const { setToast } = useToasts();
  return (
    <Button
      onClick={() => {
        setToast({
        text: (
          <Container align={"flex-start"}>
            <Badge>Badge Component !</Badge>
          </Container>
          ),
        });
      }}
    >
      Show Toast
    </Button>
  );
}

() => {
  const { setToast } = useToasts();

  const alertAction = {
    name: "alert",
    handler: () => alert("alert from toast"),
  };

  return (
    <Button
      onClick={() => {
        setToast({
        text: "The Evil Rabbit jumped over the fence.",
        actions: [alertAction],
        });
      }}
    >
      Show Toast
    </Button>
  );
}

() => {
  const { setToast } = useToasts();

  const alertAction = {
    name: "alert",
    handler: () => alert("alert from toast"),
  };

  const cancelAction = {
    name: "cancel",
    passive: true,
    handler: (_, cancel) => cancel(),
  };

  return (
    <Button
      onClick={() => {
        setToast({
        text: "The Evil Rabbit",
        actions: [alertAction, cancelAction],
        });
      }}
    >
      Show Toast
    </Button>
  );
}

() => {
  const { setToast } = useToasts();
  return (
    <Container gap={10}>
      <Button
        onClick={() => {
          setToast({
          text: "The Evil Rabbit",
          type: "success",
          });
        }}
        type={"success"}
      >
        Show Success
      </Button>

      <Button
        onClick={() => {
          setToast({
          text: "The Evil Rabbit",
          type: "warning",
          });
        }}
        type={"warning"}
      >
        Show Warning
      </Button>
      
      <Button
        onClick={() => {
          setToast({
          text: "The Evil Rabbit",
          type: "danger",
          });
        }}
        type={"danger"}
      >
        Show Danger
      </Button>
    </Container>
  );
}