Mensaje de estado

Los mensajes de estado son comunicaciones que ayudan a las personas usuarias a tomar decisiones premeditadas. Informan que algo ha ocurrido o va a ocurrir y tal vez requieran de su acción. También, sirven para reducir la incertidumbre y evitar que los usuarios cometan errores.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

Información

Esto es un título de un mensaje de información

Este es un párrafo que brinda información necesaria con la finalidad de guiar y ayudar a las personas usuarias a finalizar un proceso o iniciar uno nuevo.

<div class="status status-info">
  <h2 class="status-title">
    Esto es un título de un mensaje de información
  </h2>
  <p class="status-text">
    Este es un párrafo que brinda información necesaria
    con la finalidad de guiar y ayudar a las personas
    usuarias a finalizar un proceso o iniciar uno nuevo.
  </p>
  <p class="status-text">
    Este es un párrafo que brinda información necesaria
    con la finalidad de guiar y ayudar a las personas
    usuarias a finalizar un proceso o iniciar uno nuevo.
  </p>
  <button type="button" class="btn btn-secondary">
  <i class="bx bxs-info-circle o-icon"></i> 
    Botón
  </button>
</div>

Éxito

Esto es un título de un mensaje de éxito

Esto es un párrafo que acompaña y sirve para indicar que el usuario realizó una acción correctamente, como cuando realiza una tarea con éxito.

Éste es un ítem dentro de una lista que puede contener un enlace.
Los ítems pueden contener o no enlaces. Este es un ejemplo para un detalle que no lleva enlace.
Éste es otro ítem dentro de una lista.

<div class="status status-success">
  <h2 class="status-title">
    Esto es un título de un mensaje de éxito
  </h2>
  <p class="status-text">
    Esto es un párrafo que acompaña y sirve para indicar
    que el usuario realizó una acción correctamente, como
    cuando realiza una tarea con éxito.
  </p>
  <ul class="status-list">
    <li>
      Éste es un ítem dentro de una lista que puede
      contener un <a href="#">enlace</a>.
    </li>
    <li>
      Los ítems pueden contener o no enlaces. Este es un
      ejemplo para un detalle que no lleva enlace.
    </li>
    <li>Éste es otro ítem dentro de una lista.</li>
  </ul>
  <button type="button" class="btn btn-secondary">
  <i class="bx bxs-info-circle o-icon"></i> 
    Botón
  </button>
</div>

Advertencia

Esto es un título de un mensaje de advertencia

Esto es un párrafo que advierte y sirve para indicarle al usuario que preste atención a determinada información o acción que debe realizar.

Contar con Clave Ciudad de AGIP
Cargar en el Sistema de Tramitación a Distancia (TAD) la siguiente documentación obligatoria:
Anexo II Formulario de Presentación de Programa de Capacitación

<div class="status status-warning">
  <h2 class="status-title">
    Esto es un título de un mensaje de advertencia
  </h2>
  <p class="status-text">
    Esto es un párrafo que advierte y sirve para indicarle
    al usuario que preste atención a determinada
    información o acción que debe realizar.
  </p>
  <ul class="status-list">
    <li>
      Contar con Clave Ciudad de
      <a href="#">AGIP</a>
    </li>
    <li>
      Cargar en el Sistema de Tramitación a Distancia
      (TAD) la siguiente documentación obligatoria:
    </li>
    <li>
      Anexo II Formulario de Presentación de Programa de
      Capacitación
    </li>
  </ul>
  <button type="button" class="btn btn-secondary">
  <i class="bx bxs-info-circle o-icon"></i> 
    Botón
  </button>
  <button
    type="button"
    class="btn btn-outline-secondary"
  >
  <i class="bx bxs-info-circle o-icon"></i> 
    Botón
  </button>
</div>

Error

Esto es un título de un mensaje de peligro

Este párrafo sirve para comunicar que algo salió mal y explica cómo puede ser solucionado. Muestra errores sobre algo que se realizó.

Contar con Clave Ciudad de AGIP
Cargar en el Sistema de Tramitación a Distancia (TAD) la siguiente documentación obligatoria:
Anexo II Formulario de Presentación de Programa de Capacitación

<div class="status status-danger">
  <h2 class="status-title">
    Esto es un título de un mensaje de peligro
  </h2>
  <p class="status-text">
    Este párrafo sirve para comunicar que algo salió mal y
    explica cómo puede ser solucionado. Muestra errores
    sobre algo que se realizó.
  </p>
  <ul class="status-list">
    <li>
      Contar con Clave Ciudad de
      <a href="#">AGIP</a>
    </li>
    <li>
      Cargar en el Sistema de Tramitación a Distancia
      (TAD) la siguiente documentación obligatoria:
    </li>
    <li>
      Anexo II Formulario de Presentación de Programa de
      Capacitación
    </li>
  </ul>
  <button type="button" class="btn btn-secondary">
  <i class="bx bxs-info-circle o-icon"></i> 
    Botón
  </button>
  <button
    type="button"
    class="btn btn-outline-secondary"
  >
  <i class="bx bxs-info-circle o-icon"></i> 
    Botón
  </button>
</div>

Institucional

Este es un mensaje institucional del Gobierno de la Ciudad de Buenos Aires

En el cuerpo de este componente pueden ir enlaces o botones:https://ejemplo.buenosaires.gob.ar

<div class="status status-institutional">
  <h2 class="status-title">
    Este es un mensaje institucional del Gobierno de la
    Ciudad de Buenos Aires
  </h2>
  <p class="status-text">
    En el cuerpo de este componente pueden ir enlaces o
    botones:
    <a href="#">https://ejemplo.buenosaires.gob.ar</a>
  </p>
  <button type="button" class="btn btn-primary">
  <i class="bx bxs-info-circle o-icon"></i> 
    Ir al sitio web
  </button>
</div>