Feedback

Toast

Notificación breve y temporal que informa del resultado de una acción, como guardar un formulario. Aparece en una esquina de la pantalla, por encima del resto del contenido.

Uso

Toast levanta una notificación desde código, con un método por tono:

Toast.info("Se han guardado los cambios del formulario.");
Toast.success("La factura se ha pagado correctamente.");
Toast.warning("Quedan 2 GB libres en tu plan de hosting.");
Toast.error("No se ha podido renovar el dominio.");

<div class="button-group">
    <button class="button secondary compact" onclick="Toast.info('Se han guardado los cambios del formulario.')">Guardar</button>
    <button class="button secondary compact" onclick="Toast.success('La factura se ha pagado correctamente.')">Pagar factura</button>
    <button class="button secondary compact" onclick="Toast.warning('Quedan 2 GB libres en tu plan de hosting.')">Comprobar espacio</button>
    <button class="button secondary compact" onclick="Toast.error('No se ha podido renovar el dominio.')">Renovar dominio</button>
</div>

Cuando hay varias a la vez se apilan: la más reciente ocupa la esquina y las anteriores se apartan de ella. Todas tienen el mismo ancho, y el texto que no cabe en una línea pasa a la siguiente.

Cada llamada devuelve la notificación que ha creado.

Cierre

La notificación permanece hasta que el botón de cerrar o su método close() la retiran. Al retirarse emite el evento close.

const toast = Toast.error("No se ha podido renovar el dominio.");
toast.close();

close() acepta una espera en milisegundos, y la notificación se retira sola al cumplirse. Sin espera, el cierre es inmediato.

Toast.info("Se han guardado los cambios del formulario.").close(3000);

<button class="button secondary compact" onclick="Toast.info('Se han guardado los cambios del formulario.').close(3000)">Guardar</button>

Esquina

Toast.corner decide en qué esquina de la pantalla aparecen todas. Su valor por defecto es bottom-right, y acepta las cuatro esquinas: top-left, top-right, bottom-left y bottom-right.

Toast.corner = "top-right";

La columna en la que se apilan es <vadavo-toast-stack>, que Toast monta en el documento la primera vez que hace falta. El atributo corner la coloca en la pantalla y decide desde dónde entra cada notificación: desde fuera del borde al que pertenece esa esquina.

<div class="button-group">
    <button class="button secondary compact" onclick="Toast.corner = 'top-left'; Toast.info('Arriba a la izquierda.')">Arriba izquierda</button>
    <button class="button secondary compact" onclick="Toast.corner = 'top-right'; Toast.info('Arriba a la derecha.')">Arriba derecha</button>
    <button class="button secondary compact" onclick="Toast.corner = 'bottom-left'; Toast.info('Abajo a la izquierda.')">Abajo izquierda</button>
    <button class="button secondary compact" onclick="Toast.corner = 'bottom-right'; Toast.info('Abajo a la derecha.')">Abajo derecha</button>
</div>

Tokens semánticos