Toast is used for displaying messages that shoot out of a corner of the page like a toast. We use the `useToast` hook as shown below:

```jsx
import Button, { ButtonGroup } from "../button";
import exampleIcon from "./assets/example-icon";
import useToast from "../../hooks/use-toast";
const toast = useToast();

const handleSave = () => {
  toast({
    title: "Wonderful!",
    text: "Your progress has been saved.",
    type: "success",
    closable: true,
    duration: 3000,
  })
};

const showSuccess = () =>
  toast({
    title: "Success!",
    text: "Your landing page has been saved.",
    type: "success",
    closable: true,
  });

const showError = () =>
  toast({
    title: "Oops, something went wrong.",
    text: "Please try again in a few minutes.",
    type: "error",
    closable: true,
  });

const showInfo = () =>
  toast({
    title: "Product update",
    text: "We've made some improvements to content snippets.",
    type: "info",
    closable: true,
  });

const showCTA = () =>
  toast({
    text:
      "Save your progress to access more features including custom domains, additional field types, thank you pages, and more.",
    type: "cta",
    icon: exampleIcon,
    duration: null,
    actions: [{ text: "Save", onClick: handleSave }],
  });

<ButtonGroup>
  <Button onClick={showSuccess} is="plain" className="bg-green-500 hover:bg-green-600 text-white">
    Show success
  </Button>
  <Button onClick={showError} is="primary">
    Show error
  </Button>
  <Button onClick={showInfo} is="secondary">
    Show info
  </Button>
  <Button is="secondary" onClick={showCTA}>Show CTA</Button>
</ButtonGroup>
```