Botones

Los botones cuentan con 4 estados, 2 visibles y 2 que funcionan con la interacción del usuario:

Estados visibles:

• Default: estado principal del botón
• Deshabilitado: cuando el botón está desactivado y no ejecuta ninguna acción

Estado de interacción:

• Seleccionado (hover): cuando el cursor se posa sobre el botón
• Focus: cuando el usuario navega con la tecla Tab (acción de accesibilidad)

Existen los siguientes estilos de botones (para ver el estilo hover debe posar el cursos sobre el botón default, para ver el estilo focus debe navegar con la tecla tab.

El tamaño de los botones se define según el tipo de elemento contenedor donde se encuentren. Por defecto, toman el tamaño según el largo de la o las palabras de la acción del botón

• Cards: Pueden posicionarse horizontalmente ocupando cada uno la mitad del tamaño de la card, se utiliza la clase auxiliar “w-50”, o verticalmente ocupando el ancho total de la card, usando la clase auxiliar “w-100”
• Tablas: Ocupan el 100% de la columna, se utiliza la clase auxiliar “w-100”
• Modales: Mantienen el tamaño por defecto según el texto de la acción

Botón con ícono (versión responsive)

En algunos casos, un botón será reemplazado por su versión “sólo con ícono”. Este ícono debe reforzar el sentido de la acción a realizar. En el caso de las tablas, cuando sólo existe una acción, este botón también será reemplazado por un ícono relacionado a la acción en versión mobile.