Recuadros y alertas
Destacá una información en particular dentro de cualquier contenido.
En esta página
- Cuándo usar recuadros de texto y cuándo alertas
- Restricciones
- Valor semántico de los colores de las alertas
Cuándo usar recuadros de texto y cuándo alertas
Recuadros de texto y alertas son componentes que te permiten orientar la atención del usuario sobre un bloque de información en particular dentro de cualquier contenido (área, página, página de libro, noticia).
Tenés que usar recuadro cuando querés llamar la atención sobre una información con un recurso estético a color. El fileteado de la izquierda no brinda información, solo es un elemento decorativo.
Este recuadro se destaca
A simple vista, el usuario presta más atención a este recuadro que al párrafo de texto que tiene arriba o abajo por el fileteado a color de la izquierda y el ícono.
Las alertas, en cambio, tiene por finalidad alertar al usuario sobre un asunto muy importante que puede afectarle o requerir su intervención.
Por ejemplo, la alerta warning, que sirve como advertencia, se ve del siguiente modo.
No te olvides
Tenés plazo para presentar la documentación hasta el 30 de abril.
Por eso decimos que los colores de las alertas son semánticos, no decorativos: cada color otorga una valoración especial a la información que contiene la alerta.
Como los recuadros y las alertas jerarquizan, la información que quede por debajo va a tener menor valor para el usuario, y, si los ubicás entre dos párrafos, podés interrumpir el normal flujo de lectura.
Restriccciones
El cuerpo de texto es obligatorio en el recuadro y la alerta. Si lo dejás vacío, el código se rompe.
El título y el ícono del recuadro de texto es opcional. El ícono del recuadro puede ser cualquiera de los disponibles en la librería de Poncho.
El título de la alerta es opcional. El ícono, en cambio no es opcional ni se puede elegir: a cada color semántico le corresponde un único ícono que podés ver más abajo.
La extensión máxima del título es 80 espacios. Si el título es más largo, el código se rompe.
El título no acepta hipervínculo. Si vinculás el título, se va a ver el texto sin hipervínculo.
La extensión máxima del cuerpo de texto del recuadro es 1000 espacios. Si es más largo, el código se rompe.
La extensión máxima del cuerpo de texto de la alerta, en cambio, es 460 espacios. Si es más largo, el código se rompe.
El cuerpo de texto de recuadro y alerta solo puede tener párrafos, negrita, cursiva, hipervínculos, listas y botones en markdown.
Si agregás cualquier otro recurso markdown (foto, video, tabla, acordeón, gráfico) dentro del cuerpo de texto, no se va a mostrar.
Si el recuadro tiene ícono, siempre va a tener el mismo color del fileteado.
El ícono de la alerta siempre va a tener el mismo color semántico.
Si el recuadro tiene botón de acción, siempre se va a ver de color gris cualquiera sea el color del fileteado.
Si la alerta tiene botón de acción, siempre va a tener el mismo color semántico.
Cambio en las alertas a partir de mayo de 2026
Las restricciones de las alertas que informamos arriba (extensión de los textos, colores, íconos) y las visualizaciones que ves debajo van a estar en línea a partir de mayo de 2026.
El cambio va a ser automático, así que revisá tu código actual si tiene textos muy largos o recursos que van a dejar de funcionar para evitar que se rompa cuando ocurra el cambio.Valor semántico de los colores de las alertas
Las alertas deben tener un color específico de acuerdo con el tipo de información que brindan o el uso que hacemos del componente.
Por ejemplo, no usamos una alerta color azul acero, sino que notificamos una novedad; no la coloreamos de rojo, sino que le decimos al usuario que la información es urgente o sobre un asunto grave.
Alertá al usuario que un asunto requiere su atención urgente: danger
Usá danger (rojo) para alertar al usuario que hay un inconveniente o problema de gravedad o que un asunto muy urgente requiere su inmediata intervención.
Atención
La estación de tren está cerrada por obras hasta fines de abril.
Advertí al usuario que un asunto pronto va a requerir su atención: warning
Usa warning (amarillo) para advertir al usuario que hay un inconveniente o problema importante, aunque no grave, o que no debe olvidar un próximo vencimiento o fecha de cierre.
Notificale una novedad: info
Usá info (azul acero) para notificar al usuario un dato novedoso que no es urgente ni grave..
Tina, en tu Whatsapp
La asistente virtual del Estado nacional está siempre disponible para vos en el número 11 39101010.
Dale un anuncio positivo: success
Usá success (verde) para darle al usuario una información positiva.
Sube llegó a San Miguel de Tucumán
Usala para viajar en las casi 370 líneas de colectivos de la ciudad.