Toast
Un componente de notificaciones toast moderno con animaciones fluidas, múltiples posiciones y variantes de estilo.
import { ToastProvider, useToast } from "stofli-ui";Un toast simple con título y descripción.
Toasts con diferentes variantes de estilo.
Toasts que aparecen en diferentes posiciones de la pantalla.
Toasts que incluyen iconos para mejorar la comunicación visual.
Toast con duración personalizada antes de desaparecer automáticamente.
El componente ahora admite mostrar múltiples toasts simultáneamente, organizados según su posición.
Puedes personalizar cualquier parte del componente usando las propiedades de clases personalizadas con Tailwind CSS. Cuando proporcionas clases personalizadas, estas tienen prioridad sobre los estilos predeterminados.
Puedes usar el hook useToast dentro del ToastProvider para mostrar toasts desde cualquier parte de tu aplicación.
import { ToastProvider, useToast } from "stofli-ui";
import { Button } from "stofli-ui";
export default function ToastWithButtons() {
return (
<ToastProvider>
<ToastButton />
</ToastProvider>
);
}
function ToastButton() {
const { open } = useToast();
return (
<div className="flex flex-wrap gap-2">
<Button
variant="success"
onClick={() =>
open({
title: "Notificación",
description: "Operación completada correctamente",
variant: "success",
})
}
>
Mostrar notificación
</Button>
<Button
variant="danger"
onClick={() =>
open({
title: "Error",
description: "Ha ocurrido un error inesperado",
variant: "danger",
})
}
>
Mostrar error
</Button>
</div>
);
}| Prop | Tipo | Default | Descripción |
|---|---|---|---|
id | string | - | ID único para el toast |
open | boolean | - | Estado controlado del toast |
defaultOpen | boolean | false | Estado inicial del toast si no es controlado |
onOpenChange | (open: boolean) => void | - | Función llamada cuando cambia el estado |
title | string | - | Título del toast |
description | string | - | Descripción o mensaje del toast |
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Variante de estilo |
position | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center" | "bottom-right" | Posición en la pantalla |
duration | number | 5000 | Duración en ms antes de cerrarse automáticamente (use Infinity para que no desaparezca) |
showCloseButton | boolean | true | Muestra un botón para cerrar el toast |
className | string | - | Clases adicionales para el contenedor |
children | React.ReactNode | - | Contenido personalizado del toast |
icon | React.ReactNode | - | Icono para mostrar junto al contenido |
containerClassName | string | - | Clases para el contenedor principal del toast |
toastClassName | string | - | Clases para el fondo y borde del toast |
titleClassName | string | - | Clases para el título del toast |
descriptionClassName | string | - | Clases para la descripción del toast |
iconContainerClassName | string | - | Clases para el contenedor del icono |
contentClassName | string | - | Clases para el contenedor del contenido principal |
closeButtonClassName | string | - | Clases para el botón de cerrar |
role | "status" | "alert" | "status" | Rol ARIA para accesibilidad |
important | boolean | false | Si es true, usa aria-live="assertive" para anuncios importantes |