() => {
  const toast = useToast();
  
  return (
    <Wrap>
      <Button
        onClick={() =>
          toast({
            description:
              "Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
            status: "error",
          })
        }
      >
        Toast danger
      </Button>
      <Button
        onClick={() =>
          toast({
            title: "Toast title",
            description:
              "Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
            status: "warning",
          })
        }
      >
        Toast warning + title
      </Button>
      <Button
        onClick={() =>
          toast({
            description:
              "Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
            status: "success",
            isClosable: true,
            duration: null,
          })
        }
      >
        Toast success isClosable
      </Button>
      <Button
        onClick={() =>
          toast({
            description:
              "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.",
            status: "info",
          })
        }
      >
        Toast info
      </Button>
      <Button
        onClick={() =>
          toast({
            render: () => (
              <Alert status="success" alignItems="start">
                <AlertIcon />
                <Wrap>
                  <AlertDescription>
                    Thing created: Lorem ipsum dolor sit amet, consectetuer
                    adipiscing elit.
                  </AlertDescription>
                  <Button variant="link">
                    Button
                  </Button>
                </Wrap>
              </Alert>
            ),
          })
        }
      >
        Toast with button
      </Button>
    </Wrap>
  )
}