Sistema de diseño
Button
Es un componente fundamental y versátil de la interfaz de usuario que sirve como un elemento clickeable o tappable, típicamente utilizado para desencadenar una acción o navegar dentro de una interfaz
Figma
Storybook
AEM
Overview
Los botones son esenciales para permitir a los usuarios interactuar con aplicaciones y sitios web de manera clara e intuitiva.
Jerarquía y buenas prácticas
Los botones deben reflejar su importancia a través de un diseño jerárquico, diferenciando claramente entre botones primarios y secundarios. Deben colocarse y alinearse de manera consistente para garantizar una experiencia de usuario fluida.
Si incluyen iconos, es importante que sean claros y fácilmente comprendidos por todos los usuarios.
Los textos en los labels que acompañan a los botones deben ser concisos y descriptivos, guiando a los usuarios a la acción esperada.
Para utilizar un botón de forma efectiva en diseño, considera los siguientes puntos:
- Identifica el propósito.
- Selecciona el botón adecuado según la acción que realice.
- Ubica el botón según la importancia de la acción.
- Usa un copy claro y comprensible para describir la acción.
- Utiliza iconos del sistema de diseño de manera coherente.
- Considera todos los estados interactivos del botón.
- Asegura la accesibilidad para todos los usuarios: Esto incluye proporciones de contraste adecuadas que cumplan AA.
Accesibilidad
Los botones deben cumplir con los estándares de accesibilidad para asegurar que sean navegables y funcionales para todos los usuarios, incluidas las personas con discapacidades.
Es fundamental considerar un contraste adecuado, los estados de enfoque y otras características de accesibilidad esenciales para garantizar la inclusividad.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Cada botón tiene un propósito específico y su diseño indica dicha función. Es esencial mantener un uso consistente de las distintas variantes en los productos para asegurar que las acciones se comuniquen de manera clara y efectiva.
Uso de variantes de botones en Oxygen
Nombre
Descripción / Uso
Ejemplo
Botón primario
Es un elemento diseñado para llamar la atención y fomentar la acción primaria específica. Representa la acción más importante o deseada de la página.
Botón secundario
Se usa para acciones de menor importancia que el principal. A menudo acciones que son complementarias o secundarias. Su jerarquía visual es inferior y en ciertos contextos, los botones secundarios pueden utilizarse para fines de navegación, permitiendo a los usuarios explorar contenido relacionado, cambiar entre secciones, o acceder a funciones adicionales sin comprometerse con una acción principal.
Botón inverso
En todos aquellos casos en los que el color del fondo interfiere con el del botón se utilizará la variante inversa. Pensada para contrastar en fondos de color, fotografías...
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Icon
Las variantes de botones de Oxygen ofrecen dos opciones: con icono o sin icono. Además, el icono puede colocarse a la izquierda o a la derecha de la etiqueta, según sea necesario.
Incluir un icono en un botón es una decisión de diseño que depende del contexto y la naturaleza de la acción. Los iconos pueden servir como indicadores visuales que mejoran el reconocimiento del propósito del botón. Cuando un icono complementa un “label” claro, los usuarios pueden asociar rápidamente el símbolo con la acción prevista, lo que mejora la usabilidad.
Para los botones que desencadenan acciones más complejas o de varios pasos, un icono con una etiqueta puede proporcionar una representación más completa del proceso, ayudando a los usuarios a entender los posibles resultados.
Además, los iconos, cuando se diseñan de manera reflexiva, pueden mejorar la accesibilidad al proporcionar información visual adicional. Sin embargo, es crucial considerar las pautas de accesibilidad y asegurarse de que la combinación de icono y etiqueta sea perceptible y comprensible para todos los usuarios.
En última instancia, la decisión de incluir un icono con una etiqueta en un botón debe alinearse con los objetivos de diseño, las expectativas del usuario y los requisitos específicos de la interfaz. Es esencial equilibrar la estética visual con la usabilidad y considerar la audiencia objetivo al tomar tales decisiones de diseño.
Tamaños del botón
Nombre
Descripción / Uso
Ejemplo
Medium size
Este es el tamaño predeterminado para la interfaz, aplicable a cualquiera de las variantes.
Small size
Tamaño diseñado para elementos de interfaz pequeños, como cabeceras y tablas, donde el espacio vertical es limitado.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Overflow / Resizing
En ningún caso se deben permitir botones con más de una línea de texto. Para evitar el desbordamiento (overflow), si es necesario se cambia la agrupación horizontal a vertical.
Grupos
- El botón primario debe colocarse siempre a la derecha en agrupaciones horizontales o arriba en agrupaciones verticales.
- Solo se permite un botón primario por grupo; los demás deben ser secundarios, de acción o enlaces.
- El espaciado entre los elementos es de 16px.
- Los enlaces se alinean visualmente con el texto del botón.
- No se permite agrupar botones de diferentes tamaños.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes