Button

El Button permite a la persona ejecutar una acción: enviar un formulario, iniciar un trámite, confirmar o guardar. Tiene tres niveles de jerarquía visual para distinguir la acción principal de las secundarias.

También puede aplicarse a un enlace cuando el paso principal lleva a otra página, como “Iniciar trámite”.

Propiedades y configuraciones

Cuando usarlo

Úsalo cuando la persona debe hacer algo que cambia el estado del sistema o avanza en un flujo: enviar una solicitud, agendar una hora, guardar un borrador, confirmar una anulación.

Si el objetivo es ir a otra página, usa Link. La excepción es cuando esa navegación es el paso principal de un flujo (por ejemplo, “Iniciar trámite” o “Ir a pagar”): ahí puedes usar la apariencia de botón, pero en el HTML debe ser un enlace <a href>. Para iniciar sesión con la identidad digital del Estado, usa Botón ClaveÚnica.

Buenas prácticas

Recomendado: Usa un solo botón Primary por vista o sección

El Primary marca el siguiente paso esperado; las demás acciones van en Secondary o Tertiary para que la jerarquía sea evidente.

Recomendado: Escribe una etiqueta que diga qué hace

Empieza con un verbo y nombra el objeto, para que la persona anticipe el resultado sin leer el resto de la pantalla.

Recomendado: Usa el ícono para reforzar la etiqueta, no para reemplazarla

El ícono ayuda a reconocer la acción, pero la etiqueta es la que comunica. Elige uno que coincida con lo que hace el botón.

Recomendado: No deshabilites el botón: explica qué falta

Un botón deshabilitado no dice por qué no se puede avanzar. Déjalo activo y, si falta algo, indícalo junto a lo que hay que completar.

Malas prácticas

No recomendado: No pongas varios Primary compitiendo

Si todo es principal, nada lo es. Con cada acción en Primary, “Enviar postulación” pesa lo mismo que “Editar” o “Cancelar” y la persona tiene que leerlas todas para encontrar el siguiente paso.

No recomendado: No uses etiquetas ambiguas en confirmaciones

“Cancelar” no deja claro si anula la hora o cierra el aviso. Usa etiquetas como “Mantener hora” y “Anular hora”.

No recomendado: No uses Button para enlaces dentro de un texto

Si lleva a otra página, es un enlace: en el texto usa Link. Y aunque un botón navegue, en el HTML debe ser <a href>, no <button>.

No recomendado: No escribas etiquetas largas ni en mayúsculas sostenidas

Una etiqueta extensa o en mayúsculas se lee peor, se corta en móvil y suena a grito. Mantén 1 a 4 palabras en formato oración.

Recomendaciones de accesibilidad

Usa <button> para acciones y <a> para navegación, aunque se vea como botón
El elemento correcto define cómo lo anuncian los lectores de pantalla y qué teclas lo activan: un botón se activa con Enter y Espacio, un enlace solo con Enter. Si un botón lleva a otra página, debe ser <a href> con la apariencia de botón. En formularios, indica siempre el type (submit o button) para evitar envíos accidentales.

Que la etiqueta visible sea el nombre accesible
El texto de __label ya nombra el botón. Si agregas aria-label, debe comenzar con el mismo texto visible, para que quien usa control por voz pueda activarlo diciendo lo que ve.

Marca el ícono como decorativo
El __icon va con aria-hidden="true" cuando acompaña a una etiqueta; así no se duplica el anuncio ni se lee un nombre de ícono sin sentido.

Evita el deshabilitado silencioso
Un botón con disabled no recibe foco y los lectores de pantalla pueden omitirlo. Si necesitas mostrarlo bloqueado, explica en texto visible qué falta; considera aria-disabled="true" para que siga siendo encontrable. En un enlace con apariencia de botón, disabled no existe: quita el href y usa aria-disabled="true" para que no navegue y se anuncie como no disponible.

Hazlo distinguible por texto, no solo por color
La diferencia entre Primary, Secondary y Tertiary es visual. La acción debe entenderse por su etiqueta, aunque la persona no perciba el color o el relleno.

Anuncia el resultado de la acción
Tras enviar, guardar o anular, informa el resultado con un mensaje (Alert o Snackbar) y lleva el foco a él o al primer error, para que quien no ve la pantalla sepa qué pasó.