Estilos

Componentes

Formularios

Organismos

Mensaje de estado

Los mensajes de estado son elementos que informan y brindan contexto a las personas usuarias dentro de un flujo, acompañando su experiencia con retroalimentación relevante.

Uso

Cuándo usar

  • Cuando no hay contenido para mostrar en una pantalla, o cuando una búsqueda no arroja resultados.
  • Para comunicar sobre un error, advertencia, información o éxito de un proceso.

Cuándo no usar

  • Para informar el estado actual del sistema al procesar una tarea, utilizar Alertas. Por ejemplo: una alerta de error por un campo de formulario incompleto.
  • Para informar estados de carga temporales, utilizar el Spinner.
  • Para destacar contenido dentro del cuerpo de una página a modo de banner, utilizar el componente Destacado.

Tipos

Mensaje institutional

Se utiliza para brindar información institucional, por ejemplo, el redireccionamiento a otros sitios externos al Gobierno de la Ciudad de Buenos Aires.

Mensaje de estado institucional

Mensaje de información

Se utiliza para brindar información relevante para las personas usuarias sobre el proceso que están realizando. Por ejemplo: cuando no hay contenido para mostrar en una página o búsqueda, a modo de empty state.

Mensaje de estado información

Mensaje de éxito

Se utiliza para confirmar a la persona usuaria que una acción se ha realizado correctamente, brindándole seguridad y cierre sobre el proceso.

Mensaje de estado información

Mensaje de advertencia

Se utiliza para captar la atención de las personas usuarias, ya sea como advertencia previa o como consecuencia de una acción clave dentro del flujo.

Mensaje de estado advertencia

Mensaje de error

Se utiliza para comunicar que el proceso no se pudo completar, e indica los pasos a seguir para solucionarlo.

Mensaje de estado error

Disposición

El mensaje de estado debe ser el único elemento del cuerpo de la página, para hacer foco en el contenido y evitar sobrecargar a la persona usuaria con información.

Disposición

Contenido

La información textual de los mensajes de estado debe brindar un contexto claro y entendible, para que la persona usuaria determine cómo continuar.

Buena práctica de contenido
check

Los encabezados y las descripciones deben agregar información útil para ayudar a la persona usuaria a entender los diferentes estados de un proceso.

Mala práctica de contenido
close

Evitar los mensajes ambiguos que no proporcionan información relevante para la persona usuaria.

Uso de accionables

Los mensajes de estado deben incluir accionables claros que permitan a la persona usuaria tomar decisiones útiles frente a una situación específica. Estos accionables facilitan continuar navegando por el sitio o acceder rápidamente a ayuda en caso de necesitarlo, mejorando la experiencia y reduciendo posibles frustraciones.

  • Las etiquetas de los botones deben ser breves, claras y descriptivas. Se recomienda usar verbos en indicativo que describan la acción que se realizará, como “Adjuntar archivo”.
  • Representan una oportunidad para incentivar a las personas usuarias a seguir navegando e interactuando con la página.
Buena práctica de accionable
check

Utilizar los mensajes de estado como una oportunidad para reponerse de los errores.

Mala práctica de accionable
close

No brindar las acciones pertinentes al mensaje de estado puede generar que la persona usuaria cierre la página o abandone la navegación.

Colores semánticos y uso de íconos

El ícono de un mensaje de estado sirve como refuerzo visual y semántico para ayudar a la persona usuaria a identificar el tipo de feedback que recibe. Más allá de la ayuda que representa, no se debe depender de la iconografía para comunicar el estado, por lo que el título y la descripción del mensaje deben ser claros y explicativos.

Mala práctica de colores semanticos
close

No modificar el uso de la paleta cromática en la iconografía. El color semántico debe ser congruente con el contenido del mensaje.

Patrones de uso

El mensaje de estado aparece posterior a procesos de carga y no suplanta otros componentes que se utilizan para guiar la espera. Por ejemplo, dentro de un pago o trámite, se utiliza para detallar y confirmar la actualidad del proceso e indicar los siguientes pasos.

Patrón de uso paso 1

1. La persona usuaria confirma el proceso.

Patrón de uso paso 2

2. El sistema valida la información mediante la retroalimentación del indicador de carga.

Patrón de uso paso 3

3. El mensaje de estado brinda visibilidad sobre la confirmación o rechazo de la solicitud, y las acciones pertinentes para que la persona usuaria continúe la navegación.

Contenido en esta página

Información

Este es el título de un mensaje de estado

Este es un párrafo breve que sirve como mensaje. Puede utilizarse para dar indicaciones adicionales como la realización de una tarea o instrucciones a seguir.

  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
<div class="status status-info">
  <h2 class="status-title">Este es el título de un mensaje de estado</h2>
  <p class="status-text">
    Este es un párrafo breve que sirve como mensaje. Puede utilizarse para dar indicaciones adicionales como la realización de una tarea o instrucciones a seguir.
  </p>
  <div class="list-informative status-list">
    <ul class="list-informative-bullet">
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
    </ul>
  </div>
  <button type="button" class="btn btn-primary">
    Botón
  </button>
  <button type="button" class="btn btn-outline-primary">
    Botón
  </button>
</div>

Éxito

Este es el título de un mensaje de estado

Este es un párrafo breve que sirve como mensaje. Puede utilizarse para dar indicaciones adicionales como la realización de una tarea o instrucciones a seguir.

  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
<div class="status status-success">
  <h2 class="status-title">Este es el título de un mensaje de estado</h2>
  <p class="status-text">
    Este es un párrafo breve que sirve como mensaje. Puede utilizarse para dar indicaciones adicionales como la realización de una tarea o instrucciones a seguir.
  </p>
  <div class="list-informative status-list">
    <ul class="list-informative-bullet">
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
    </ul>
  </div>
  <button type="button" class="btn btn-primary">
    Botón
  </button>
  <button type="button" class="btn btn-outline-primary">
    Botón
  </button>
</div>

Advertencia

Este es el título de un mensaje de estado

Este es un párrafo breve que sirve como mensaje. Puede utilizarse para dar indicaciones adicionales como la realización de una tarea o instrucciones a seguir.

  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
<div class="status status-warning">
  <h2 class="status-title">Este es el título de un mensaje de estado</h2>
  <p class="status-text">
    Este es un párrafo breve que sirve como mensaje. Puede utilizarse para dar indicaciones adicionales como la realización de una tarea o instrucciones a seguir.
  </p>
  <div class="list-informative status-list">
    <ul class="list-informative-bullet">
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
    </ul>
  </div>
  <button type="button" class="btn btn-primary">
    Botón
  </button>
  <button type="button" class="btn btn-outline-primary">
    Botón
  </button>
</div>

Error

Este es el título de un mensaje de estado

Este es un párrafo breve que sirve como mensaje. Puede utilizarse para dar indicaciones adicionales como la realización de una tarea o instrucciones a seguir.

  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
  • Este es el contenido de un ítem de una lista general. Puede contener un enlace.
<div class="status status-danger">
  <h2 class="status-title">Este es el título de un mensaje de estado</h2>
  <p class="status-text">
    Este es un párrafo breve que sirve como mensaje. Puede utilizarse para dar indicaciones adicionales como la realización de una tarea o instrucciones a seguir.
  </p>
  <div class="list-informative status-list">
    <ul class="list-informative-bullet">
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
      <li>
        Este es el contenido de un ítem de una lista general. Puede contener un <a href="#">enlace</a>.
      </li>
    </ul>
  </div>
  <button type="button" class="btn btn-primary">
    Botón
  </button>
  <button type="button" class="btn btn-outline-primary">
    Botón
  </button>
</div>

Institucional

Este es el título de un mensaje de estado

Este es un párrafo breve que sirve como mensaje. Puede utilizarse para dar indicaciones adicionales como la realización de una tarea o instrucciones a seguir. Puede contener un enlace.

<div class="status status-institutional">
  <h2 class="status-title">Este es el título de un mensaje de estado</h2>
  <p class="status-text">
    Este es un párrafo breve que sirve como mensaje. Puede utilizarse para dar indicaciones adicionales como la realización de una tarea o instrucciones a seguir. Puede contener un <a href="#">enlace</a>.
  </p>
  <button type="button" class="btn btn-primary">
    Botón
  </button>
  <button type="button" class="btn btn-outline-primary">
    Botón
  </button>
</div>

Variantes

Anatomía

Anatomia del mensaje de estado
ElementoCarácter
Ícono o ilustraciónObligatorio.
TítuloObligatorio.
DescripciónObligatoria.
Lista informativaOpcional, solo si es necesario listar información.
AccionablesObligatorio. Puede llevar hasta 2 accionables.

Variantes

Desktop

En la versión desktop, los mensajes de estado siguen el patrón de lectura en F y un orden de lectura de izquierda a derecha.

Variante desktop de mensaje de estado

Mobile

En dispositivos móviles, los mensajes de estado siguen la estructura de columna, acomodando los elementos que conforman el componente uno debajo del otro. Por tratarse de acciones principales y para asegurar la usabilidad de los accionables, los botones siguen la alineación en columna y de ancho completo.

Variante mobile de mensaje de estado

Espaciado

El mensaje de estado se divide en dos bloques. El primer bloque incluye el ícono, el título, la bajada y la lista, con un espaciado de 16px entre cada elemento. El segundo, contiene los accionables y tiene un espaciado de 48px respecto al primer bloque.

Desktop

Espaciado desktop de mensaje de estado

Mobile

Espaciado mobile de mensaje de estado

Contenido en esta página

Navegación alternativa

Todos los elementos del mensaje de estado pueden recorrerse utilizando la navegación por teclado u otras herramientas de asistencia como lectores por voz.

TABENTER

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Además, con el enter, puede accionar los elementos sobre los que esté posicionada como botones, enlaces, entre otros.

Navegacion alternativa del botón

Criterios WCAG aplicados

Success Criterion 1.4.11 Non-Text Contrast (Level AA)

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

Success Criterion 1.4.3 Contrast (Minimum) (Level AA)

La presentación visual de texto y de imágenes de texto tiene una relación de contraste de por lo menos 4.5:1, excepto textos grandes e imágenes de texto grande que tienen un contraste de por lo menos 3:1, textos o imágenes que son parte de un componente inactivo de interfaz de usuario o son pura decoración, o logotipos.

Success Criterion 2.1.1 Keyboard (Level A)

Todas las funcionalidades del contenido se puede operar a través de una interfaz de teclado.

Success Criterion 2.1.2 No Keyboard Trap (Level A)

Si el foco del teclado puede moverse a un componente de la página utilizando una interfaz de teclado, también debe ser posible mover el foco fuera de ese componente usando únicamente la misma interfaz de teclado. Si se requiere algo más que las teclas de flecha, tabulador u otros métodos estándar para salir, se debe informar al usuario sobre el método necesario para mover el foco.

Success Criterion 2.4.7 Focus Visible (Level AA)

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible.

Success Criterion 2.4.3 Focus Order (Level A)

Si una página web puede navegarse de forma secuencial y las secuencias de navegación afectan el significado o la operación, los componentes enfocables reciben el foco en un orden que preserve el significado y la operabilidad.

Success Criterion 2.4.4 Link Purpose (In Context) (Level A)

El propósito de cada enlace debe ser determinado solo con el texto del enlace o con el texto del enlace junto con su contexto determinado de forma programática, excepto en los casos en los que el propósito del enlace sea ambiguo para los usuarios en general.

Contenido en esta página

Navegación de pie de página