# Toast: Types

> Every toast uses the same calm surface; only the icon carries the color.

Example: https://hextaui.com/docs/toast/examples/types
Component docs: https://hextaui.com/docs/toast.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/toast-types.json
```

This adds `components/examples/toast/types.tsx` with the Toast component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/toast/types.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastTypes() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <Button variant="outline" size="sm" onClick={() => toast("Draft saved")}>
        Default
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() => toast.success("Payment received")}
      >
        Success
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() =>
          toast.error("Couldn't upload photo", {
            description: "The file is larger than 10 MB.",
          })
        }
      >
        Error
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() => toast.warning("Storage almost full")}
      >
        Warning
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() => toast.info("A new version is available")}
      >
        Info
      </Button>
    </div>
  )
}
```

## More Toast examples

- [Promise](https://hextaui.com/docs/toast/examples/promise.md)
- [Action](https://hextaui.com/docs/toast/examples/action.md)
- [Update in place](https://hextaui.com/docs/toast/examples/update.md)
- [No duplicates](https://hextaui.com/docs/toast/examples/dedupe.md)