Alerta

La alerta se utiliza para llamar la atención del usuario y proporcionarle información útil sin interrumpir su flujo de trabajo.

§Cuándo usar

Está diseñado para actualizar al usuario sobre el estado actual del sistema, informar de errores y advertencias y proporcionar al usuario instrucciones, enlaces o comandos para corregir esos errores lo antes posible.

§Tipos

Según la situación, el usuario puede ver uno de los siguientes tipos de alerta (tipo):

• El peligro se usa para notificar al usuario que el escenario subyacente no puede continuar en este momento (por ejemplo, no hay acceso a un objeto) o que otras acciones del usuario pueden provocar la pérdida permanente de datos o recursos.
• La advertencia se utiliza para informar al usuario de que otras operaciones pueden resultar difíciles o de que un escenario alternativo puede no estar disponible.
• El éxito se usa para notificar al usuario un estado positivo o cualquier otro cambio positivo en el sistema. Por ejemplo, sobre la finalización exitosa de una operación prolongada.
• La información se usa para mostrar recomendaciones sobre cómo organizar el trabajo con el sistema (que deben mostrarse de forma explícita) o para anunciar funciones adicionales del sistema.
• Normal se usa principalmente para resaltar texto, como ayuda breve, código de ejemplo, resultados de cálculos, etc.

No sustituya los tipos simplemente para llamar la atención del usuario, por ejemplo, mostrando la información de referencia en una alerta por un tipo de advertencia o error.

Además de las instrucciones, Alert ofrece una serie de comandos para ayudar al usuario a encontrar una solución y tomar medidas.

§Cuándo no usar

Debido a su naturaleza disruptiva (especialmente si se selecciona un tipo de alerta incorrecto), las alertas deben usarse con moderación.

• No recomendamos usar Alert para mostrar un mensaje de error, advertencia o ayuda asociado a un formulario o campo de diálogo independiente. En esta situación, es mejor usar el estado Error en el componente de campo o mostrar un mensaje de texto sin formato o texto con un icono junto al campo.
• No recomendamos colocar varias alertas, como las de peligro y advertencia, en la misma página (formulario, cuadro de diálogo), ya que esto dificulta la determinación de la prioridad de los mensajes.
• No utilices Alert para ningún otro propósito que no sea el previsto, como resaltar visualmente los bloques de la página: encabezados, campos de formulario, etc.
• No utilice Alert para confirmar que las operaciones se han completado. Para este tipo de tareas, utilice Dialog.
• No utilice una alerta para mostrar el estado de una operación iniciada por el usuario. Para ello, utilice Toaster.

§Contenido

Los elementos de alerta obligatorios incluyen una descripción y un icono. Además de estos, Alert puede incluir un título (Título), un botón de cierre (Cerrar) y hasta tres botones adicionales con acciones (Acciones).

§Icono

De forma predeterminada, una alerta muestra un icono que corresponde a su tipo. Sin embargo, puede elegir su propio icono para el componente sin modificar el color de fondo. Para el tipo de alerta Normal, el icono es opcional y no se muestra de forma predeterminada.

§Texto

El texto del título y la descripción deben ser lo más breves posible y comenzar con una letra mayúscula. Si desea proporcionar más información al usuario, es mejor utilizar enlaces o los botones «Ayuda», «Documentación» y «Más información» para dirigir al usuario a una página de ayuda o sitio web independiente.

El título debe transmitir claramente la tesis del mensaje. Sin embargo, no debe repetir la descripción. Si es difícil elegir la tesis y convertirla en un titular, usa la descripción sin encabezado.

El título no debe terminar con un punto.

§Botones

Según los requisitos y restricciones del diseño, es posible que aparezcan botones adicionales a la derecha del texto (diseño horizontal) o debajo de él (diseño vertical).

Si los botones y sus etiquetas dejan suficiente espacio para la descripción y el encabezado sin crear saltos de línea innecesarios, coloque los botones a la derecha. Si el ancho de la alerta es inferior a 500-600 píxeles, opta por la vista vertical.

Los botones adicionales utilizan el estilo Normal de forma predeterminada. Sin embargo, según la semántica del mensaje, pueden ser Action, Contrast-normal y varios tipos de Outline (Outline-info, Outline-danger, etc.). Recomendamos que los estilos de los tres botones sean coherentes. Utilice solo un botón de acción y asegúrese de tener en cuenta el contexto de la página, por ejemplo, si ya hay otros botones de acción presentes.

La alerta tiene un botón en forma de cruz que debe mostrarse en caso de que el usuario quiera ocultar el mensaje debido a su irrelevancia.

§Opciones

El ancho de la alerta no está limitado: puede ocupar todo el espacio disponible en la página (formulario o cuadro de diálogo) o tener un ancho fijo determinado por el ancho del contenido principal.

Si la alerta está diseñada para mostrarse cerca de los bordes de la página (formulario, cuadro de diálogo) y ocupar todo el ancho (por ejemplo, un mensaje sobre la actualización del navegador o las condiciones para almacenar las cookies en el sitio), no es necesario redondear las esquinas del contenedor de alertas.

Si el diseño no requiere que la alerta atraiga activamente la atención del usuario, puedes usar la vista esquemática, que tiene el mismo tipo de semántica que la vista rellena.