Banner

Avisos en el flujo de la página. Fondo neutro o tintado, icono de estado y cierre opcional. Dos variantes: soft y solid.

Preview principal

BANNERsoft · 4 tipos

Cambios guardados correctamente

No se pudo completar la acción

Tu sesión expirará pronto

Nueva versión disponible

Aviso en línea (no overlay). Color solo para el estado; el resto sigue el tema.

Variante soft

Fondo tintado, texto del tema e icono de estado. Menos invasivo.

Cambios guardados correctamente

No se pudo completar la acción

Tu sesión expirará pronto

Nueva versión disponible

Variante solid

Fondo con el color de estado. Más atención; warning usa texto oscuro.

Cambios guardados correctamente

No se pudo completar la acción

Tu sesión expirará pronto

Nueva versión disponible

Con cierre

onClose muestra la X. open controla la visibilidad.

Puedes cerrar este aviso. El banner vive en el flujo de la página.

Tipos

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

Variantes

Variante	Estilo
`soft`	Fondo tintado, texto del tema
`solid`	Fondo con color de estado

Uso

import { Banner } from "devsoftec-ui";

<Banner
  type="success"
  variant="soft"
  open={show}
  onClose={() => setShow(false)}
>
  Cambios guardados correctamente
</Banner>

Props

Prop	Tipo	Default	Descripción
`type`	`info` \| `success` \| `error` \| `warning`	`info`	Estado / icono
`variant`	`solid` \| `soft`	`solid`	Estilo de fondo
`open`	`boolean`	`true`	Visibilidad
`onClose`	`() => void`	—	Muestra el botón cerrar
`children`	`ReactNode`	—	Contenido
`className`	`string`	—	Clase adicional