Toast

La pile visible.

Un seul <Toaster /> à la racine de l'application. Il rend les six coins : une annonce peut choisir le sien, ce qui permet à une confirmation d'apparaître près du geste qui l'a déclenchée et à une panne générale de s'imposer en haut de l'écran.

Installation

sia-ui add toast

Ou par le paquet, sans rien copier :

import { Toaster, ToastProvider, useToast } from "@sia-ui/react-web";

Props de Toaster

Prop	Type	Défaut	Description
className	string	—
container	HTMLElement	—	Où rendre la pile. Par défaut, un nœud créé sous document.body. À fournir quand le thème est porté par un conteneur plutôt que par la racine du document : sorties de ce conteneur, les annonces perdraient ses variables et s'afficheraient dans le thème clair.
duration	number	—	Durée par défaut, pour les tons qui n'en imposent pas une.
limit	number	—	Nombre visible simultanément. Au-delà, la plus ancienne s'efface.
offset	string | number	1rem	Décalage depuis le bord de l'écran.
placement	ToastPlacement	bottom-right	Coin par défaut des annonces qui n'en précisent pas.
spinnerProps	SpinnerProps	—	Les props du Spinner des annonces en attente (toast.loading, toast.promise) — variante, taille. Sans effet sur une annonce qui fournit sa propre icon.
width	string | number	24rem	Largeur d'une annonce.

Props de ToastProvider

Enveloppe les enfants et monte le Toaster.

Aucun contexte : le magasin vit hors de React. Ce composant n'existe que pour monter la pile au bon endroit sans y penser.

Prop	Type	Défaut	Description
className	string	—
container	HTMLElement	—	Où rendre la pile. Par défaut, un nœud créé sous document.body. À fournir quand le thème est porté par un conteneur plutôt que par la racine du document : sorties de ce conteneur, les annonces perdraient ses variables et s'afficheraient dans le thème clair.
duration	number	—	Durée par défaut, pour les tons qui n'en imposent pas une.
limit	number	—	Nombre visible simultanément. Au-delà, la plus ancienne s'efface.
offset	string | number	—	Décalage depuis le bord de l'écran.
placement	ToastPlacement	—	Coin par défaut des annonces qui n'en précisent pas.
spinnerProps	SpinnerProps	—	Les props du Spinner des annonces en attente (toast.loading, toast.promise) — variante, taille. Sans effet sur une annonce qui fournit sa propre icon.
width	string | number	—	Largeur d'une annonce.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.