Botones

Los botones son elementos interactivos que permiten al usuario ejecutar acciones específicas dentro de la plataforma.

La apariencia de los botones se deriva del color primario de la operación correspondiente, asegurando consistencia con la identidad visual de la misma.

Variantes visuales

El sistema contempla dos variantes para adaptarse a la jerarquía de la interfaz.

Se aplica utilizando el color primary para el borde y el texto, con fondo transparente. Se utiliza para acciones secundarias o complementarias.

Se aplica utilizando el color primary como fondo. Es la variante de alta prioridad para acciones principales (CTAs).

Aplicación por operación

Medellín

Outline:
- Borde: var(--primary-medellin)
- Texto: var(--primary-medellin)
- Fondo: Transparente

Filled:
- Fondo: var(--primary-medellin)
- Texto: Blanco

Cali

Outline:
- Borde: var(--primary-cali)
- Texto: var(--primary-cali)
- Fondo: Transparente

Filled:
- Fondo: var(--primary-cali)
- Texto: Blanco

Manizales

Outline:
- Borde: var(--primary-manizales)
- Texto: var(--primary-manizales)
- Fondo: Transparente

Filled:
- Fondo: var(--primary-manizales)
- Texto: Blanco

Buenas prácticas

Se debe hacer uso exclusivo de las variables CSS o tokens de diseño. Nunca se deben insertar códigos Hexadecimales de forma manual en el CSS del componente.