# Toast

A temporary notification.

Group: Overlays & Feedback

## Import

```tsx
import { Toaster, toaster } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
<HStack wrap="wrap" gap="3">
  <Button
    size="sm"
    variant="outline"
    onClick={() => toast.success("Tersimpan", { description: "Perubahan lo udah kesave." })}
  >
    Success
  </Button>
  <Button
    size="sm"
    variant="outline"
    onClick={() => toast.error("Gagal nyimpen", { description: "Coba lagi beberapa saat lagi." })}
  >
    Error
  </Button>
  <Button
    size="sm"
    variant="outline"
    onClick={() => toast.warning("Kuota hampir habis", { description: "Sisa 10% lagi." })}
  >
    Warning
  </Button>
  <Button
    size="sm"
    variant="outline"
    onClick={() => toast.info("Ada update baru", { description: "v0.2.0 udah bisa dipakai." })}
  >
    Info
  </Button>
  <Button
    size="sm"
    variant="outline"
    onClick={() =>
      toast.promise(new Promise((resolve) => setTimeout(resolve, 2500)), {
        loading: { title: "Ngirim file...", description: "Jangan tutup tab ini." },
        success: { title: "Terkirim", description: "File lu udah masuk." },
        error: { title: "Gagal ngirim" },
      })
    }
  >
    Loading (promise)
  </Button>
  <Button
    size="sm"
    variant="outline"
    onClick={() => {
      const id = toast.loading("Menyimpan...")
      setTimeout(() => toast.update(id, { type: "success", title: "Tersimpan", description: "Semua perubahan aman.", duration: 3000 }), 2000)
    }}
  >
    Loading → update
  </Button>
  <Button
    size="sm"
    variant="outline"
    onClick={() => toast.success("Custom warna + ikon", { description: "Ikon diganti emoji.", icon: "✨" })}
  >
    Custom icon
  </Button>
  <Button
    size="sm"
    variant="outline"
    onClick={() => toast("Notifikasi polos", { description: "Nggak ada warna/ikon sama sekali." })}
  >
    Plain
  </Button>
  <Button
    size="sm"
    variant="outline"
    onClick={() => ["Satu", "Dua", "Tiga", "Empat", "Lima"].forEach((label, i) => setTimeout(() => toast.info(label), i * 150))}
  >
    Stack 5x
  </Button>
  <Button
    size="sm"
    variant="outline"
    onClick={() => ["A", "B", "C", "D", "E", "F"].forEach((label) => limitedToaster.create({ title: "Max 3: " + label, type: "info", duration: 6000 }))}
  >
    Max 3 (spam 6)
  </Button>
</HStack>
// const limitedToaster = createToaster({ placement: "top-end", max: 3 })
// render <Toaster toaster={limitedToaster} /> once, extra toasts queue until a slot frees up
```

## Props

### Toaster

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `toaster` | `CreateToasterReturn<ReactNode>` |  | Custom toaster instance. Defaults to the built-in one (exported as `toaster`). |

`*` = required. Style props and HTML attributes are accepted too.