Component · C-019

Toast

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.

Install

Install koten-theme first when the project has no Koten tokens yet.

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

Requirements

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

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.

Read the whole page

• Markdown page
• Agent index (llms.txt)
• Full documentation (llms-full.txt)

Koten UI · llms.txt · llms-full.txt · Markdown