# Alertas

> Avisos de información, éxito, advertencia y error: estados, estilos, íconos y accesibilidad.

Categoría: Feedback · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usar una alerta

Una alerta informa algo importante sin interrumpir. Va dentro de la página, junto al contenido que afecta.

Por qué: Interrumpe menos que un modal y se queda a la vista hasta que la persona resuelve el tema. Si el mensaje es pasajero y no requiere acción, un aviso breve que desaparece es mejor.

## Guía: Estados

Cuatro estados, cada uno con su ícono Bold de 20 px y su color de token. El texto siempre dice el estado; el color solo lo refuerza.
Estado | Ícono | Rol ARIA | Cuándo

Información | solar:info-circle-bold | status | Novedades y avisos neutros.
Éxito | solar:check-circle-bold | status | Algo salió bien y la persona lo sabe.
Advertencia | solar:danger-triangle-bold | alert | Algo puede salir mal si no se actúa.
Error | solar:close-circle-bold | alert | Algo falló y hay que corregirlo.

## Guía: Estilos

Tres estilos. El estilo por defecto es Suave.
Estilo | Cómo se ve | Cuándo

Suave | Fondo suave del color del estado, sin borde | Por defecto. Casi todos los avisos.
Contorno | Fondo de la página y borde del color del estado | Cuando hay varios avisos juntos y el fondo de color pesaría.
Sólido | Relleno del color del estado, texto blanco | Un solo aviso crítico por pantalla.

Por qué: Sólido es el que más llama la atención; si se usa varias veces, ninguno destaca. Contorno pesa menos que Suave y deja respirar listas de avisos.

## Suave

```html
<div class="space-y-3">
<div role="status" class="flex items-center gap-3 p-4 rounded-ccs bg-ccs-bg dark:bg-ccs-dark-accent/10">
  <iconify-icon icon="solar:info-circle-bold" class="shrink-0 text-[20px] text-ccs-blue dark:text-ccs-dark-accent" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Hay una nueva versión del sitio disponible.</span>
</div>
<div role="status" class="flex items-center gap-3 p-4 rounded-ccs bg-ccs-success-soft dark:bg-ccs-dark-success-fill/10">
  <iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[20px] text-ccs-success dark:text-ccs-dark-success" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Tu inscripción quedó confirmada.</span>
</div>
<div role="alert" class="flex items-center gap-3 p-4 rounded-ccs bg-ccs-warning-soft dark:bg-ccs-dark-warning-fill/10">
  <iconify-icon icon="solar:danger-triangle-bold" class="shrink-0 text-[20px] text-ccs-warning dark:text-ccs-dark-warning" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Tu sesión expirará en 5 minutos.</span>
</div>
<div role="alert" class="flex items-center gap-3 p-4 rounded-ccs bg-ccs-error-soft dark:bg-ccs-dark-error-fill/10">
  <iconify-icon icon="solar:close-circle-bold" class="shrink-0 text-[20px] text-ccs-error dark:text-ccs-dark-error" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">No pudimos procesar la solicitud.</span>
</div>
</div>
```

## Contorno

```html
<div class="space-y-3">
<div role="status" class="flex items-center gap-3 p-4 rounded-ccs border bg-white border-ccs-blue dark:border-ccs-dark-accent dark:bg-ccs-dark-surface">
  <iconify-icon icon="solar:info-circle-bold" class="shrink-0 text-[20px] text-ccs-blue dark:text-ccs-dark-accent" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Hay una nueva versión del sitio disponible.</span>
</div>
<div role="status" class="flex items-center gap-3 p-4 rounded-ccs border bg-white border-ccs-success dark:border-ccs-dark-success dark:bg-ccs-dark-surface">
  <iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[20px] text-ccs-success dark:text-ccs-dark-success" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Tu inscripción quedó confirmada.</span>
</div>
<div role="alert" class="flex items-center gap-3 p-4 rounded-ccs border bg-white border-ccs-warning dark:border-ccs-dark-warning dark:bg-ccs-dark-surface">
  <iconify-icon icon="solar:danger-triangle-bold" class="shrink-0 text-[20px] text-ccs-warning dark:text-ccs-dark-warning" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Tu sesión expirará en 5 minutos.</span>
</div>
<div role="alert" class="flex items-center gap-3 p-4 rounded-ccs border bg-white border-ccs-error dark:border-ccs-dark-error dark:bg-ccs-dark-surface">
  <iconify-icon icon="solar:close-circle-bold" class="shrink-0 text-[20px] text-ccs-error dark:text-ccs-dark-error" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">No pudimos procesar la solicitud.</span>
</div>
</div>
```

## Sólido

```html
<div class="space-y-3">
<div role="status" class="flex items-center gap-3 p-4 rounded-ccs bg-ccs-blue dark:bg-ccs-blue-mid">
  <iconify-icon icon="solar:info-circle-bold" class="shrink-0 text-[20px] text-white" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-white">Hay una nueva versión del sitio disponible.</span>
</div>
<div role="status" class="flex items-center gap-3 p-4 rounded-ccs bg-ccs-success-fill dark:bg-ccs-dark-success-fill">
  <iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[20px] text-white" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-white">Tu inscripción quedó confirmada.</span>
</div>
<div role="alert" class="flex items-center gap-3 p-4 rounded-ccs bg-ccs-warning-fill dark:bg-ccs-dark-warning-fill">
  <iconify-icon icon="solar:danger-triangle-bold" class="shrink-0 text-[20px] text-white" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-white">Tu sesión expirará en 5 minutos.</span>
</div>
<div role="alert" class="flex items-center gap-3 p-4 rounded-ccs bg-ccs-error-fill dark:bg-ccs-dark-error-fill">
  <iconify-icon icon="solar:close-circle-bold" class="shrink-0 text-[20px] text-white" aria-hidden="true"></iconify-icon>
  <span class="text-sm font-medium text-white">No pudimos procesar la solicitud.</span>
</div>
</div>
```

## Guía: El mensaje

Una alerta puede tener tres formas, según cuánto haya que decir. Elige la más simple que alcance.

- Solo mensaje. Una línea que dice qué pasó y, si corresponde, qué hacer. Es la forma más común.

- Con título y descripción. Cuando hay más que contar: el título resume en pocas palabras y la descripción lo explica en una o dos frases.

- Con botón. Solo si hay una acción concreta que tomar. El botón nombra la acción (“Extender sesión”), no dice “Aceptar”.

El tono de los textos está en Documentación › Voz y tono.

## Título y descripción

```html
<div role="status" class="flex items-start gap-3 p-4 rounded-ccs bg-ccs-bg dark:bg-ccs-dark-accent/10">
  <iconify-icon icon="solar:info-circle-bold" class="shrink-0 text-[20px] text-ccs-blue dark:text-ccs-dark-accent mt-0.5" aria-hidden="true"></iconify-icon>
  <div class="flex-1">
    <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Mantención programada · 18 may, 02:00–04:00</div>
    <div class="mt-0.5 text-sm text-ccs-slate dark:text-ccs-dark-text-2">El sitio estará temporalmente fuera de servicio.</div>
  </div>
</div>
```

## Con acciones

```html
<div role="alert" class="flex flex-col gap-3 p-4 sm:flex-row sm:items-center rounded-ccs bg-ccs-warning-soft dark:bg-ccs-dark-warning-fill/10">
  <div class="flex flex-1 items-center gap-3">
    <iconify-icon icon="solar:danger-triangle-bold" class="shrink-0 text-[20px] text-ccs-warning dark:text-ccs-dark-warning" aria-hidden="true"></iconify-icon>
    <span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Tu sesión expirará en 5 minutos.</span>
  </div>
  <div class="flex gap-2">
    <button type="button" class="h-9 px-3 rounded-ccs border border-ccs-line-strong bg-white text-sm font-medium text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue transition dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-accent dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Cerrar sesión</button>
    <button type="button" class="h-9 px-3 rounded-ccs bg-ccs-warning-fill text-white text-sm font-medium hover:bg-ccs-warning-fill-hover transition dark:bg-ccs-dark-warning-fill dark:hover:bg-ccs-dark-warning-fill-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Extender</button>
  </div>
</div>
```

## Título, descripción y botón

```html
<div role="status" class="flex flex-col gap-3 p-4 sm:flex-row sm:items-start rounded-ccs bg-ccs-bg dark:bg-ccs-dark-accent/10">
  <div class="flex flex-1 items-start gap-3">
    <iconify-icon icon="solar:info-circle-bold" class="shrink-0 text-[20px] text-ccs-blue dark:text-ccs-dark-accent mt-0.5" aria-hidden="true"></iconify-icon>
    <div>
      <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Actualiza tus datos de contacto</div>
      <div class="mt-0.5 text-sm text-ccs-slate dark:text-ccs-dark-text-2">Los usamos para avisarte de tus trámites. Toma menos de un minuto.</div>
    </div>
  </div>
  <button type="button" class="h-9 px-3 rounded-ccs border border-ccs-line-strong bg-white text-sm font-medium text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue transition dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-accent dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Actualizar</button>
</div>
```

## Con botón de cerrar

```html
<div role="status" class="flex items-center gap-3 p-4 rounded-ccs bg-ccs-success-soft dark:bg-ccs-dark-success-fill/10">
  <iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[20px] text-ccs-success dark:text-ccs-dark-success" aria-hidden="true"></iconify-icon>
  <span class="flex-1 text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Recibirás un correo con los detalles del evento.</span>
  <button type="button" aria-label="Cerrar aviso" class="grid h-10 w-10 shrink-0 place-items-center rounded-lg text-ccs-slate dark:text-ccs-dark-text-2 hover:text-ccs-ink dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-circle-bold" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></button>
</div>
```

## Guía: Accesibilidad

- Advertencia y error llevan role="alert": el lector de pantalla los anuncia de inmediato. Información y éxito llevan role="status": se anuncian sin interrumpir.
- Un aviso fijo en el contenido de la página, que no aparece por una acción de la persona, lleva role="note" en vez de alert o status: así el lector de pantalla no lo anuncia de golpe al cargar.
- El estado no depende solo del color: lo dicen el ícono y el texto.
- El botón de cerrar es solo ícono: lleva aria-label y un área de 40 px.

Criterios WCAG que respalda: Criterios de WCAG: 1.4.1 (uso del color), 1.4.11 (contraste de componentes), 4.1.3 (mensajes de estado) y 2.5.8 (tamaño del objetivo).