---
title: "Toast"
description: "A temporary notification that confirms an action without cutting the flow. It stacks in its own region, closes on its own and keeps the text of the operation."
kind: component
id: C-019
registry: "toast"
docs: "https://koten.codehive.com.co/components/toast"
markdown: "https://koten.codehive.com.co/md/components/toast.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/toast.json"
language: en
---

# Toast · トースト

> Component C-019 in the Koten UI catalog.

A temporary notification that confirms an action without cutting the flow. It stacks in its own region, closes on its own and keeps the text of the operation.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/toast.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/toast.json
```

## Files

- `@/components/ui/toast.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Requirements

- **provider** — ToastProvider at the root: Wrap the application once and pass closeLabel and regionLabel; the viewport and portal live inside the provider.
- **hook** — useToast in a client component: Call toast.add({ title, description, type }) inside a handler; the hook only works under ToastProvider.

## Reference

- Upstream primitive: https://base-ui.com/react/components/toast

## Examples

### Provider and hook

A local button calls useToast and adds the notice; the provider draws the region and the close control.

```tsx
<ToastProvider closeLabel="Close" regionLabel="Notifications">
  <SaveButton />
</ToastProvider>

function SaveButton() {
  const toast = useToast();

  return (
    <Button
      variant="primary"
      onClick={() =>
        toast.add({
          title: "Order updated",
          description: "Order KURA-0142 moved to preparing.",
          type: "success",
        })
      }
    >
      Show toast
    </Button>
  );
}
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `closeLabel` | `string` | `requerido` | Accessible name of the close button; translate it to the interface language. |
| `regionLabel` | `string` | `requerido` | aria-label of the notification viewport; it describes the region, not the notice. |
| `timeout` | `number` | `5000` | Milliseconds before auto-close; the default comes from Base UI. |
| `limit` | `number` | `—` | Maximum visible toasts; new ones replace the oldest. |
| `toast.add` | `{ title, description, type }` | `—` | type accepts info, success, warning or danger; the same value picks the icon. |
| `children` | `ReactNode` | `—` | Application tree that can open toasts; the provider must stay mounted. |

## Accessibility

- The viewport is a region with aria-label set to regionLabel; each toast is announced without moving focus.
- Close uses aria-label set to closeLabel and keeps focus inside the toast.
- Auto-close must not be the only way to read an important change: repeat it with a persistent Alert.
- Do not put essential actions only in a toast; it disappears and cannot be recovered.

## Sources

- Catalog page: https://koten.codehive.com.co/components/toast
- Markdown: https://koten.codehive.com.co/md/components/toast.md
- Repository: https://github.com/codehive-colombia/koten