Button
Los botones indican que se puede ejecutar una acción y la inician cuando el usuario interactúa con ellos.
Descarga la librería LDDescarga la librería SD
Tipos de botones
Primario
Se utiliza para las acciones principales del producto digital. Por ejemplo, acciones en un formulario.
- Los botones primarios sólo deben aparecer una vez por pantalla.
- No siempre es necesario incluir un botón primario en la página.
Secundario
Se utiliza para las acciones secundarias o menos importantes en cada página. Por ejemplo, se puede utilizar para acciones como retroceder, cancelar, agregar...
Terciario
Se utiliza para acciones con menos importancia que las anteriores que no implican cambios importantes dentro de la interfaz o acciones embebidas en componentes.
Este tipo de botón también es una opción si el diseño requiere de botones que no tengan el estilo de color naranja.
Icono y texto
Se pueden incluir iconos dentro del botón para añadir un significado adicional al botón o reforzar la acción.
Los iconos se colocan antes de la etiqueta del botón.
Sólo con icono
Se puede utilizar para barras de herramientas o botones donde no encaje el texto. Este tipo de botones sólo se debe usar cuando el significado del icono esté claro para el usuario.
Spinner
Botón que indica al usuario que el contenido se está cargando.
Estados
1. Default: es el estado por defecto de los botones.
2. Hover: es la interacción al pasar por encima del botón.
3. Disabled: es el estado desactivado y no se puede seleccionar ni deseleccionar.
Tamaños y variaciones
Cada variación de los botones tiene diferentes tamaños, excepto los que sólo llevan icono, para adaptarse mejor a las diferentes resoluciones de pantallas y/o aplicaciones en el caso de que se necesiten diversos tamaños. Este componente está disponible para dispositvos Large Device y Small Device, ofreciendo así una mejor adaptación de los botones a todos los breakpoints.
Large - device
Botones de 48 px
El tamaño por defecto de los botones es de 48 px. En este caso, existen dos variaciones:
1. Con texto grande: la etiqueta del botón tiene un tamaño de 18 px. Se usa para Heros o banners principales.
2. Con texto pequeño: la etiqueta del botón tiene un tamaño de 16 px. Es el botón más común.
Botones de 40 px
Botón para incluir en lugares donde el espacio sea más limitado.
Botones con icono
El tamaño de los botones con icono es de 32x32 px.
Small - device
Botones de 48 px
El tamaño por defecto de los botones es de 48 px. En este caso, existen dos variaciones:
1. Con texto grande: la etiqueta del botón tiene un tamaño de 18 px. Se usa para Heros o banners principales.
2. Con texto pequeño: la etiqueta del botón tiene un tamaño de 16 px. Es el botón más común.
Botones de 96 px fix
Son botones que se utilizan para fijarlos al ancho de la pantalla. Sólo se recomienda el uso máximo de dos botones. Están recomendados para ocasiones donde tiene que primar la accesibilidad.
Ejemplo de aplicación:
Botones con icono
Comparten el mismo tamaño que los botones de large-device.
Recomendaciones de uso
- Los botones comunican acciones, por lo que se suelen colocar en lugares como modales, formularios, banners, menús de navegación, etc.
- Se recomienda usar la misma altura para todos los botones que se coloquen en la misma fila.
- Se debe comenzar la etiqueta del botón con letra mayúscula, pero no se recomienda el uso de mayúsculas en la palabra.
- El texto no debe tener más de una línea, en ese caso se podrá adaptar el ancho.
Estilos
Color
Botones primarios
Botones secundarios
Botones terciarios
Texto
