---
title: Toast
description: Show global status notifications
type: reference
summary: Trigger provider-backed success, warning, and error notifications.
url: /docs/components/toast
source: apps/template/content/docs/components/toast.mdx
related:
  - /docs/components
  - /docs/provider
---

# Toast

import { ToastDemo } from "@/components/geistdocs/toast-demo";

Use the buttons to preview every status variant:

<div className="not-prose my-6 flex min-h-32 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <ToastDemo />
</div>

```tsx
"use client";

import { useToasts } from "@vercel/geistdocs/components/toasts";

export function StatusButtons() {
  const toast = useToasts();

  return (
    <div>
      <button onClick={() => toast.success({ text: "Changes saved" })}>
        Success
      </button>
      <button
        onClick={() => toast.warning({ text: "Review these changes" })}
      >
        Warning
      </button>
      <button onClick={() => toast.error({ text: "Something went wrong" })}>
        Error
      </button>
    </div>
  );
}
```

`GeistdocsProvider` mounts the global toast area. Use `success`, `warning`, or `error` with a `{ text }` message from any client component below the provider.