Botón
Biblioteca de componentes
Cómo usar este componente
Los botones inician acciones, con etiquetas que describen claramente lo que sucederá. Colóquelos cerca de los elementos relevantes y alinéelos a la izquierda, a la derecha o al centro. Use botones primarios para acciones principales y botones secundarios y terciarios para los menos comunes.
Un botón se usa para desencadenar una acción o evento y debe indicar lo que sucederá cuando un usuario haga clic en él.
Prácticas recomendadas
- Use los botones con moderación, ya que varios botones pueden crear confusión para los usuarios.
- El texto del botón debe identificar claramente el destino del enlace.
- Los enlaces externos y los enlaces de documentos/archivos deben abrirse en una nueva ventana.
- No utilices texto genérico, como "Haz clic aquí".
- No cree sus propios botones ni use imágenes como botones.
- No utilices texto demasiado largo o complicado para las etiquetas de los botones.
- No incluya signos de puntuación en los botones.
Tipos de botones
Primario
Use los botones principales para enfatizar una acción clave. Estos deben usarse para la acción más importante en una página o dentro de un contenedor.
Botones secundarios
Use botones secundarios para acciones menos importantes o un énfasis medio.
Botones terciarios
Use botones terciarios para acciones de bajo énfasis. A menudo se agrupan con otros botones terciarios.
Colocación
- Coloque los botones cerca del texto que proporciona contexto adicional sobre por qué los usuarios seleccionan el vínculo del botón.
- Asegura un acolchado y espaciado adecuados para facilitar la lectura.
Botón múltiple
- El botón principal enfatiza el comportamiento deseado.
Opciones de configuración
Espaciamiento
Si se necesita espacio debajo del botón, seleccione la parte inferior del margen deseado en el menú desplegable.
Alineación
- Alineado a la izquierda: Se utiliza mejor en formularios y contenido de página completa.
- Alineado al centro: Es mejor usarlo en columnas más pequeñas o como contenido promocional.
- Alineado a la derecha: Se usa mejor en ventanas pequeñas, como modales y ventanas emergentes. El botón principal debe estar ubicado a la derecha.
Accesibilidad
- Use elementos semánticos para los botones para mejorar la accesibilidad de los lectores de pantalla.
- Asegúrese de que los botones tengan estados de foco visibles para indicar la navegación con el teclado para los usuarios que no pueden usar un mouse.
- Asegurar un espacio adecuado entre los botones.
- Si usa varios botones en una página, cada uno debe tener una etiqueta única.
- Para dispositivos móviles, asegúrese de que los botones tengan una altura mínima de 42 px.
- Los estados de botón deben incluir:
- predeterminado
- Deshabilitado
- error
- centrado
- cernerse
- Presionado
Navegación por teclado
| Llaves | Acción |
| Pestaña | Centro de atención |
| Espacio/entrar | Activa el botón |
Lista de verificación del coordinador web
- Use texto descriptivo y conciso para la etiqueta Button.
- Utilice la opción "Examinar" para ingresar el campo URL, en lugar de pegar un enlace interno.
- Verifique que los enlaces externos estén configurados para "abrirse en una nueva ventana".