Toast

Notificaciones temporales con estado. Fondo neutro, borde, icono, título + descripción y cierre opcional. Seis posiciones en pantalla.

Preview principal

TOAST4 tipos

Éxito

Cambios guardados correctamente

Error

No se pudo completar la acción

Aviso

Tu sesión expirará pronto

Información

Nueva versión disponible

Fondo neutro, borde, StateIcon y cierre opcional vía onClose.

Lanzar toast

Elige posición y dispara un tipo. Se cierra a los ~4s o con la X.

Posicióntop-lefttop-centertop-rightbottom-leftbottom-centerbottom-right

ÉxitoErrorAvisoInformación

Con cierre

onClose muestra el botón X.

Actualización

Puedes cerrar esta notificación manualmente.

Tipos

Tipo	Uso
success	Operación exitosa
error	Error
warning	Aviso
info	Información

Posiciones

top-left · top-center · top-right · bottom-left · bottom-center · bottom-right

Con position, el toast se fija en esa esquina (portal a document.body).

Uso

import { Toast } from "devsoftec-ui";

<Toast
  type="success"
  title="Éxito"
  open={show}
  position="bottom-right"
  onClose={() => setShow(false)}
>
  Cambios guardados correctamente
</Toast>

Props

Prop	Tipo	Default	Descripción
type	info | success | error | warning	info	Estado / icono
title	string	—	Título
children	ReactNode	—	Descripción
open	boolean	true	Visibilidad
onClose	() => void	—	Muestra el botón cerrar
position	6 valores	—	Fija en pantalla vía portal