Botón
Biblioteca de componentes
Cómo utilizar 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. Utilice los botones principales para las acciones principales y los botones secundarios y terciarios para las menos comunes.
Un botón se utiliza para desencadenar una acción o evento y debe indicar lo que sucederá cuando un usuario haga clic en él.
Prácticas recomendadas
- Utilice 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 a documentos/archivos deben abrirse en una nueva ventana.
- No utilices texto genérico, como "Haz clic aquí".
- No crees tus propios botones ni utilices imágenes como botones.
- No utilices texto demasiado largo o complicado para las etiquetas de los botones.
- No incluyas signos de puntuación en los botones.
Tipos de botones
Primario
Utilice los botones principales para dar un gran énfasis a 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
Utilice botones terciarios para acciones de bajo énfasis. A menudo se agrupan con otros botones terciarios.
Colocación
- Coloque los botones cerca del texto que proporcione contexto adicional para explicar por qué los usuarios seleccionan el vínculo del botón.
- Asegúrese de que el acolchado y el espaciado sean adecuados para facilitar la lectura.
Multi-botón
- El botón principal hace hincapié en 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: Se utiliza mejor en columnas más pequeñas o como contenido promocional.
- Alineado a la derecha: Se utiliza mejor en ventanas pequeñas, como modales y ventanas emergentes. El botón principal debe estar ubicado a la derecha.
Accesibilidad
- Utilice elementos semánticos para los botones con el fin de 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.
- Asegúrese de que haya 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 los botones deben incluir:
- predeterminado
- Deshabilitado
- error
- centrado
- cernerse
- Presionado
Navegación con teclado
| Llaves | Acción |
| Pestaña | Centro de atención |
| Espacio/Entrar | Activa el botón |
Lista de verificación del coordinador web
- Utilice texto descriptivo y conciso para la etiqueta del botón.
- Utilice la opción "Examinar" para introducir el campo de URL, en lugar de pegar un enlace interno.
- Verifique que los enlaces externos estén configurados como "abrir en una ventana nueva".