Notificación

Tarjeta neutra con StateIcon, mensaje, acción opcional y cierre. No rompe el layout como un Banner: flota con sombra.

Preview principal

NOTIFICATIONtarjeta · status

successerrorwarninginfo

ÉxitoLos cambios se guardaron correctamente en tu cuenta.

Ver cambios

type=success · open=true

Estados

Superficie neutra; el color solo va en el StateIcon.

Los cambios se guardaron correctamente en tu cuenta.

Ver cambios

No se pudo procesar el pago. Revisa los datos e inténtalo de nuevo.

Reintentar

Tu suscripción caduca en 3 días. Renueva para no perder el acceso.

Renovar

Hay una nueva versión disponible. Actualiza cuando quieras.

Actualizar

Sin acción

Solo mensaje + cierre (action omitido).

Hay una nueva versión disponible.

Uso

import { useState } from "react";
import { Notification } from "devsoftec-ui";

function Ejemplo() {
  const [open, setOpen] = useState(true);

  return (
    <Notification
      type="success"
      open={open}
      onClose={() => setOpen(false)}
      action={{ label: "Ver cambios", onClick: () => setOpen(false) }}
    >
      Los cambios se guardaron correctamente.
    </Notification>
  );
}

Props

Prop	Tipo	Default	Descripción
type	info | success | error | warning	info	Estado (ícono)
open	boolean	true	Visibilidad
onClose	() => void	—	Muestra ✕ y cierra
action	{ label, onClick? }	—	CTA inferior derecha
children	ReactNode	—	Mensaje
className	string	—	Clase extra

Comportamiento

• Superficie neutra — el color solo en el ícono de estado
• role="status"
• Acción con flecha a la derecha
• Animación ds-notif-in (entrada suave)
• Diferencia vs Banner: inline / full-bleed; Notification es tarjeta flotante
• Diferencia vs Toast: Toast suele apilarse en portal; Notification se coloca donde la montes