Botón

Biblioteca de componentes

Cómo usar este componente

Los botones inician acciones, con etiquetas que describen claramente lo que va a ocurrir. Colócalos cerca de los elementos relevantes y alinealos a la izquierda, derecha o centro. Usa botones principales para acciones principales y botones secundarios y terciarios para los menos comunes.

Un botón se utiliza para activar una acción o evento y debe indicar qué ocurrirá cuando un usuario haga clic.

Componente de botón

Ver la transcripción del vídeo del componente Button.

Mejores prácticas

Usa los botones con moderación, ya que varios botones pueden crear confusión para los usuarios.
El texto del botón debería identificar claramente el destino del enlace.
Los enlaces externos y los enlaces de documentos/archivos deberían abrirse en una ventana nueva.

No uses texto genérico, como "Haz clic aquí".
No crees tus propios botones, ni uses imágenes como botones.
No uses texto demasiado largo o complicado para etiquetar los botones.
No incluyas puntuación en los botones.

Tipos de botones

Primaria

Usa botones principales para dar mucha importancia a una acción de tecla. Estos deben usarse para la acción más importante en una página o dentro de un contenedor.

Botones secundarios
Usa botones secundarios para acciones menos importantes, o un énfasis medio.

Botones terciarios

Usa botones terciarios para acciones de bajo énfasis. A menudo se agrupan con otros botones terciarios.

Ubicación

Coloca botones cerca del texto que proporcione contexto adicional sobre por qué los usuarios seleccionan el enlace del botón.
Asegúrate de que el relleno y el espacio sean adecuados para facilitar la legibilidad.

Multibotón

El botón principal pone énfasis en el comportamiento deseado.

Opciones de configuración

Espaciado

Si se necesita espacio debajo del botón, selecciona el margen inferior deseado en el desplegable.

Alineación

Alineado a la izquierda: Es mejor usarse en formularios y contenido a página completa.
Alineado al centro: Mejor usarse en columnas pequeñas o como contenido promocional.
Alineado a la derecha: Es mejor usarlo en ventanas pequeñas, como modales y ventanas emergentes. El botón principal debería estar ubicado a la derecha.

Accesibilidad

Utiliza elementos semánticos para los botones y así mejorar la accesibilidad de los lectores de pantalla.
Asegúrate de que los botones tengan estados de enfoque visibles para indicar la navegación con el teclado a los usuarios que no pueden usar el ratón.
Asegúrate de un espacio adecuado entre los botones.
Si usas varios botones en una página, cada uno debería tener una etiqueta única.
Para móviles, asegúrate de que los botones tengan una altura mínima de 42px.
Los estados de los botones deberían incluir:
- Por defecto
- Deshabilitado
- Error
- Enfocado
- Flotar
- presionado

Navegación con teclado

Teclas	Acción
Pestaña	Centro de atención
Espacio/entrada	Activa el botón

Lista de verificación para Coordinador Web

Usa texto descriptivo y conciso para etiquetar el botón.
Utiliza la opción "Explorar" para introducir el campo URL, en lugar de pegar un enlace interno.
Verificar que los enlaces externos estén configurados como "abrir en una nueva ventana".