Componentes · Estado
Toast (notificaciones breves)
Confirma eventos no críticos mediante mensajes compactos que no bloquean la tarea actual.
No bloquea
Acompaña el flujo sin crear un diálogo.
Descartable
Puede cerrarse de manera explícita.
Mensaje breve
Combina título y descripción corta.
Código + resultado
Ejemplo aplicado de Toast
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.
<div class="q-toast bc-success rounded-12 shadow-box-s" role="status">
<div>
<strong>
Proyecto actualizado
</strong>
<p>
Todos los cambios fueron guardados.
</p>
</div>
<button class="q-toast__close rounded-100" type="button" data-qy-dismiss aria-label="Cerrar">
×
</button>
</div>Todos los cambios fueron guardados.
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-toast | Contenedor | Notificación temporal visible. |
.shadow-box-s | Sombra opcional | Separa visualmente la notificación del contenido. |
.bc-{token} | Color de acento | Sincroniza el borde, el título y el control de cierre con un color del framework. |
.q-toast__close | Cerrar | Control circular ubicado en la esquina superior derecha. |
role="status" | Semántica | Anuncia el mensaje sin interrumpir. |
data-qy-dismiss | Hook JS | Retira la notificación. |
.rounded-12 | Radio opcional | Redondea la notificación. |
.rounded-100 | Control circular | Redondea completamente el botón de cierre. |
Recomendaciones
Buenas prácticas de Toast
Breve y directo
Limita el mensaje a una confirmación fácil de escanear.
No acumular
Evita apilar múltiples notificaciones simultáneas.
Tiempo suficiente
No retires contenido antes de poder leerlo.
Estado persistente
Si importa después, refleja el resultado también en la interfaz.