# Alert (mensajes contextuales)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-alert.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Estado

Comunica información, confirmaciones, advertencias y errores sin interrumpir innecesariamente el flujo.

v2.0

i
## Cuatro variantes
Información, éxito, advertencia y peligro.

✓
## Semántica visible
El color acompaña un texto claro y nunca actúa como única señal.

×
## Dismiss opcional
El módulo puede retirar mensajes descartables de la interfaz.

i
## Mensaje antes que color
Utiliza `role="status"` para información no urgente y `role="alert"` cuando requiera anuncio inmediato.

Código + resultado

## Ejemplos aplicados de Alert
Selecciona una variante para revisar únicamente su código y el resultado correspondiente.

HTML

```html
<div class="q-alert rounded-12" role="status">
  <span class="q-alert__icon rounded-100" aria-hidden="true">
    i
  </span>
  <div>
    <strong>
      Actualización disponible
    </strong>
    <p>
      Hay una nueva versión lista para instalar.
    </p>
  </div>
  <button class="q-alert__close rounded-100" type="button" data-qy-dismiss aria-label="Cerrar">
    ×
  </button>
</div>
```

Resultado aplicado   Alert · información

Componente real
i   Actualización disponible  Hay una nueva versión lista para instalar.

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

HTML

```html
<div class="q-alert rounded-12 q-alert--success" role="status">
  <span class="q-alert__icon rounded-100" aria-hidden="true">
    ✓
  </span>
  <div>
    <strong>
      Cambios guardados
    </strong>
    <p>
      La configuración ya está activa.
    </p>
  </div>
  <button class="q-alert__close rounded-100" type="button" data-qy-dismiss aria-label="Cerrar">
    ×
  </button>
</div>
```

Resultado aplicado   Alert · éxito

Componente real
✓   Cambios guardados  La configuración ya está activa.

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

HTML

```html
<div class="q-alert rounded-12 q-alert--warning" role="status">
  <span class="q-alert__icon rounded-100" aria-hidden="true">
    !
  </span>
  <div>
    <strong>
      Revisa la configuración
    </strong>
    <p>
      Algunos campos todavía requieren atención.
    </p>
  </div>
  <button class="q-alert__close rounded-100" type="button" data-qy-dismiss aria-label="Cerrar">
    ×
  </button>
</div>
```

Resultado aplicado   Alert · advertencia

Componente real
!   Revisa la configuración  Algunos campos todavía requieren atención.

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

HTML

```html
<div class="q-alert rounded-12 q-alert--danger" role="alert">
  <span class="q-alert__icon rounded-100" aria-hidden="true">
    !
  </span>
  <div>
    <strong>
      No fue posible guardar
    </strong>
    <p>
      Corrige los errores e inténtalo nuevamente.
    </p>
  </div>
  <button class="q-alert__close rounded-100" type="button" data-qy-dismiss aria-label="Cerrar">
    ×
  </button>
</div>
```

Resultado aplicado   Alert · peligro

Componente real
!   No fue posible guardar  Corrige los errores e inténtalo nuevamente.

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

Referencia

## Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.

| Clase o atributo | Función | Uso recomendado |
| --- | --- | --- |
| .q-alert | Contenedor | Mensaje contextual base. |
| .q-alert--success | Éxito | Confirmación positiva. |
| .q-alert--warning | Advertencia | Situación que requiere atención. |
| .q-alert--danger | Peligro | Error o acción crítica. |
| .q-alert__icon | Icono | Refuerza visualmente el tipo de mensaje. |
| .q-alert__close | Cerrar | Control circular para descartar el mensaje. |
| role="status" / role="alert" | Semántica | Comunica la prioridad a tecnologías de asistencia. |
| data-qy-dismiss | Hook JS | Retira el alert cuando es descartable. |
| .bc-{token} | Color de acento | Sincroniza texto, icono, borde y fondo suave. |
| .rounded-12 | Radio opcional | Redondea el contenedor del mensaje. |
| .rounded-100 | Elementos circulares | Redondea por completo el icono y el botón de cierre. |

Recomendaciones

## Buenas prácticas de Alert

01
### Texto accionable
Explica qué ocurrió y, si corresponde, qué hacer a continuación.

02
### Rol correcto
Reserva alert para mensajes urgentes o errores importantes.

03
### No dependas del color
Incluye icono, título o texto que explique el estado.

04
### Cerrar sólo si aplica
No hagas descartable un error que aún requiere solución.