# Toaster

> Short confirmation that something happened, with optional Undo.

Component · Overlays · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/Toaster/)

Short confirmation that something happened, with optional Undo. Call `toast(...)` anywhere; render `<Toaster/>` once.

`toast(text)` or `toast({ text, tone, icon, undo, action: {label, onClick}, duration })` returns an id; `toast.dismiss(id)`.
Toaster props: `position` ("bottom" default, "top").

- Tone follows the status map: success for done, info for started, danger for removed or failed.
- Offer `undo` for every reversible destructive action instead of a confirm dialog; Undo toasts last 6 s, others 4 s.
- Hover pauses the timer; the thin line at the bottom shows time left.
- One sentence, past tense, names the thing: "Invoice #2097 sent", not "Success!".

## Example

```tsx
import * as React from "react";
import { Button, Toaster, toast } from "@twentyfirstmedia/pro";

function App() {
  React.useEffect(() => {
    toast({
      text: "Invoice #2097 sent to Northwind",
      tone: "success",
      duration: 600000,
    });
    toast({
      text: "2 people removed",
      tone: "danger",
      icon: "trash",
      undo: () => {
        toast({
          text: "Restored",
          tone: "info",
          duration: 600000,
        });
      },
      duration: 600000,
    });
  }, []);
  return (
    <div
      className="tf-panel"
      style={{
        gap: 12,
      }}
    >
      <div className="tf-row">
        <Button
          variant="soft"
          onClick={() => {
            toast("Profile saved");
          }}
        >
          Success
        </Button>
        <Button
          variant="soft"
          onClick={() => {
            toast({
              text: "Build started for halo-web",
              tone: "info",
            });
          }}
        >
          Info
        </Button>
        <Button
          variant="soft"
          onClick={() => {
            toast({
              text: "Project archived",
              undo: () => {
                toast("Restored");
              },
            });
          }}
        >
          With undo
        </Button>
      </div>
      <p
        className="tf-card-desc"
        style={{
          margin: 0,
        }}
      >
        Toasts stack bottom-center above the dock, three at most. Hover pauses the timer.
      </p>
      <Toaster />
    </div>
  );
}
export default App;
```

## Props

### Button

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"` |  |
| `size?` | `"md" \| "sm"` |  |
| `icon?` | `IconName` |  |
| `iconRight?` | `IconName` |  |
| `disabled?` | `boolean` |  |
| `type?` | `"button" \| "submit" \| "reset"` |  |
| `onClick?` | `(e: MouseEvent<HTMLButtonElement>) => void` |  |
| `children?` | `ReactNode` |  |
| `asChild?` | `boolean` | Render the single child element (a link, a router Link) with the button's look instead of a <button>. |
| `id?` | `string` |  |
| `name?` | `string` | Form field name and value, sent with the form when this button submits it. |
| `value?` | `string` |  |
| `form?` | `string` | The id of the form this button belongs to, when it sits outside it. |
| `title?` | `string` |  |
| `tabIndex?` | `number` |  |
| `autoFocus?` | `boolean` |  |
| `aria-label?` | `string` |  |
| `aria-labelledby?` | `string` |  |
| `aria-describedby?` | `string` |  |
| `aria-expanded?` | `boolean \| "true" \| "false"` | For disclosure and menu triggers: whether what the button controls is open. |
| `aria-controls?` | `string` |  |
| `aria-haspopup?` | `boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"` |  |
| `aria-pressed?` | `boolean \| "true" \| "false" \| "mixed"` | For toggle buttons. |
| `aria-current?` | `boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Toaster

| Prop | Type | Notes |
| --- | --- | --- |
| `position?` | `"bottom" \| "top"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |