Componentes · Estado
Alert (mensajes contextuales)
Comunica información, confirmaciones, advertencias y errores sin interrumpir innecesariamente el flujo.
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.
Código + resultado
Ejemplos aplicados de Alert
Selecciona una variante para revisar únicamente su código y el resultado correspondiente.
<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>Hay una nueva versión lista para instalar.
Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
<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>La configuración ya está activa.
Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
<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>Algunos campos todavía requieren atención.
Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
<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>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
Texto accionable
Explica qué ocurrió y, si corresponde, qué hacer a continuación.
Rol correcto
Reserva alert para mensajes urgentes o errores importantes.
No dependas del color
Incluye icono, título o texto que explique el estado.
Cerrar sólo si aplica
No hagas descartable un error que aún requiere solución.