Tostadora
La tostadora es una pequeña notificación que aparece en la pantalla para proporcionar información importante o una advertencia. Se puede usar para notificar al usuario sobre un evento o una acción, como cuando se envía un formulario o se descarga un archivo.
Tipos principales
Predeterminado
Se usa cuando no hay necesidad de una acción inmediata o cuando el mensaje no está relacionado con ninguna acción o evento específico.
Información
Se usa para informar al usuario sobre un proceso, evento o acción. Por ejemplo, en caso de que la transferencia de datos o la carga de la página se realicen correctamente.
Éxito
Indica que una operación o acción se ha completado correctamente. Por ejemplo, cuando los datos se guardan correctamente o cuando el usuario está autorizado.
Advertencia
Informa al usuario sobre un posible problema o error. Por ejemplo, si necesitan rellenar un campo obligatorio en un formulario o si no hay conexión a Internet.
Error
Se usa para indicar un error y que se requiere la atención del usuario para solucionarlo. Por ejemplo, si los datos se han introducido de forma incorrecta o si hay un error en el servidor. Este estado se combina mejor con un botón de acción que te permita corregir un error u obtener más información.
Modificaciones
La tostada se compone de cinco componentes principales:
- Icono de tipo tostada. Un componente se puede usar con o sin un icono. Un icono es un elemento opcional.
- El encabezado informa al usuario sobre la acción que se está realizando. Si se incluye la descripción, el uso del encabezado es opcional.
- La descripción aclara el título y se puede utilizar de forma independiente.
- Botones. Toast puede tener uno o dos botones; se recomienda utilizar el primer botón como botón de acción. Los botones son elementos opcionales.
- Icono de salida. El icono de salida es un elemento opcional. El botón de cierre es obligatorio si no hay una duración de ocultación establecida en la tostada.
Cuándo usar
Se recomienda el uso de tostadoras en los siguientes escenarios:
- Al enviar un formulario o realizar una acción, si quieres que el usuario vea el progreso. Por ejemplo, un mensaje que indica que los datos se enviaron correctamente o que hubo un error.
- Cuando no desea interrumpir el flujo de trabajo del usuario o bloquear la pantalla. Las tostadoras se muestran en la esquina y no cubren toda la pantalla, lo que permite al usuario seguir utilizando la interfaz.
- Cuando se requiere más información sobre una acción específica. Los brindis pueden incluir enlaces a contenido o información adicional que ayudarán al usuario a entender lo sucedido.
Cuándo no usar
No se recomienda el uso de tostadoras en los siguientes escenarios:
- Cuando se requiere una respuesta inmediata del usuario.
- Cuando la acción que se está realizando en el momento de mostrar la tostadora puede ocasionar problemas o consecuencias no deseadas.
- Cuando el mensaje requiere una gran cantidad de información o una explicación más detallada.
- Cuando la información ya se muestra en la pantalla en otro formulario.
Posición en la pantalla
La tostadora se muestra en la esquina inferior derecha.
Sus márgenes externos son: M inferior (8px), XL derecho (20px).
Personalización
El contenido de Toast puede diferir del estándar; puede incluir cualquier componente disponible en la biblioteca, si el caso de uso lo requiere.