# Toast (notificaciones breves)

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

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

Componentes · Estado

Confirma eventos no críticos mediante mensajes compactos que no bloquean la tarea actual.

v2.0

✓
## No bloquea
Acompaña el flujo sin crear un diálogo.

×
## Descartable
Puede cerrarse de manera explícita.

i
## Mensaje breve
Combina título y descripción corta.

i
## No para errores críticos
Si el usuario debe actuar para continuar, utiliza Alert junto al contenido afectado o Modal para una decisión focal.

Código + resultado

## Ejemplo aplicado de Toast
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.

HTML

```html
<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>
```

Resultado aplicado   Toast · confirmación visible

Componente real
Proyecto actualizado  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

01
### Breve y directo
Limita el mensaje a una confirmación fácil de escanear.

02
### No acumular
Evita apilar múltiples notificaciones simultáneas.

03
### Tiempo suficiente
No retires contenido antes de poder leerlo.

04
### Estado persistente
Si importa después, refleja el resultado también en la interfaz.