34/Interacción y estado

Alert y banner

Mensajes en línea con cuatro tonos y banners de ancho completo. Se pueden cerrar y recordar.

Alertas

Nueva versión disponible

Actualiza para usar los temas de color. Ver cambios

Pago recibido

Tu plan vence en 3 días

No se pudo emitir la factura

El NIT del cliente no es válido.

HTML

<div class="flex flex-col gap-3">
  <div class="cb-alert cb-alert--info" role="status"><svg class="cb-alert__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg><div class="cb-alert__body"><p class="cb-alert__title">Nueva versión disponible</p><p class="cb-alert__text">Actualiza para usar los temas de color. <a href="#">Ver cambios</a></p></div></div>
  <div class="cb-alert cb-alert--success" role="status"><svg class="cb-alert__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg><div class="cb-alert__body"><p class="cb-alert__title">Pago recibido</p></div><button class="cb-alert__close" type="button" data-cb-dismiss aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
  <div class="cb-alert cb-alert--warning" role="status"><svg class="cb-alert__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 3 2 20h20L12 3z"/><path d="M12 10v4M12 17h.01"/></svg><div class="cb-alert__body"><p class="cb-alert__title">Tu plan vence en 3 días</p><div class="cb-alert__actions"><button class="cb-btn cb-btn--outline cb-btn--sm" type="button">Renovar</button></div></div></div>
  <div class="cb-alert cb-alert--danger" role="alert"><svg class="cb-alert__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m9 9 6 6M15 9l-6 6"/></svg><div class="cb-alert__body"><p class="cb-alert__title">No se pudo emitir la factura</p><p class="cb-alert__text">El NIT del cliente no es válido.</p></div></div>
</div>

Banner

Con data-cb-dismiss-key se recuerda que ya se cerró (en localStorage).

HTML

<div class="cb-banner" data-cb-dismiss-key="demo-banner">
  <span>Cobalto 0.1 ya está disponible. <a href="#">Leer anuncio ↗</a></span>
  <button class="cb-banner__close" type="button" data-cb-dismiss aria-label="Cerrar anuncio"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
</div>
<div class="cb-banner cb-banner--subtle">Modo de prueba activo · <a href="#">Ir a producción</a></div>

Clases y modificadores

Clase	Descripción
`.cb-alert`	Alerta con borde y fondo del tono.
`.cb-alert--info\|success\|warning\|danger`	Tonos (por defecto, acento).
`.cb-alert__icon`, `.cb-alert__title`, `.cb-alert__text`, `.cb-alert__actions`, `.cb-alert__close`	Partes.
`.cb-banner`	Franja de ancho completo en color de acento. `--subtle` la hace neutra.
`.is-dismissed`	Oculta el elemento cerrado.

Atributos data-cb-*

Atributo	Descripción
`data-cb-dismiss`	Botón que cierra la alerta o banner que lo contiene.
`data-cb-dismissible`	Marca otro contenedor como cerrable.
`data-cb-dismiss-key="clave"`	Recuerda el cierre en `localStorage`.

JavaScript

Evento	Cuándo se dispara
`cb:close`	En el contenedor antes de ocultarlo; cancelable.

Accesibilidad

Usa role="alert" solo para errores urgentes; para el resto, role="status".
El botón de cerrar necesita aria-label.