Toast container (1.x)
The 1.x controlled list of toasts (toasts, onDismiss), drawn by the @krizaka/ui Toaster.
Web — React, from @krizaka/orazaka-design-system. The Orazaka mobile app takes the kit's tokens, not its components. Deprecated: kept for the apps that still use it, removed in its next major.
DeprecatedSince 2.3.0, removed in 3.0.0. Use instead: Toast (Krizaka UI).
Why it exists above Krizaka UI
Kept so that the apps written against 1.x keep their notifications while they migrate to toast().
Built onToast
When to use
- Never in new code: mount
Toasteronce and calltoast.success(…)from@krizaka/ui/toast.
When not to use
- Anywhere new: it is deprecated.Use instead: Toast
Installation
Install
npm install @krizaka/orazaka-design-system && npm install -D tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/orazaka-design-system/theme.css";The package ships its TypeScript sources: add it to transpilePackages (with @krizaka/orazaka-shared and @krizaka/ui).
Import
import { ToastContainer } from "@krizaka/orazaka-design-system";Props
The 1.x controlled toast list, drawn by the
| Prop | Type | Default | Description |
|---|---|---|---|
onDismissrequired | (id: string) => void | — | Called with the id when a toast is closed or times out. |
toastsrequired | ToastItem[] | — | The active toasts (controlled): a new id is shown, a removed id is dismissed. |
closeLabel | string | Dismiss notification | The accessible name of each close button (1.x: "Dismiss notification"); pass it translated. |
label | string | Notifications | The accessible name of the notifications region — 1.x had none; pass it translated. |
Accessibility
- The primitive's: a polite live region named by
label.
Best practices
- Pass
labelandcloseLabeltranslated until the migration.
Related components
Generated from the code of @krizaka/orazaka-design-system 2.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub