Botones


El Kit UC disponibiliza diferentes botones para ser aplicados en acciones, formularios, links con diferente jerarquía visual y estados, incluyendo versiones de botones con estado deshabilitado, al final de esta sección.

Botones primarios

Botón Básico / Sin ícono

Ejemplo:

Botón Básico / Icono Circular

Ejemplo:

Botón Básico / Icono Simple

Ejemplo:

Botones secundarios

Botón Básico / Sin ícono

Ejemplo:

Botón Básico / Icono Circular

Ejemplo:

Botón Básico / Icono Simple

Ejemplo:

Botón de acción

Botón Básico / Call to action

Ejemplo:

Botones Destacados

Botón Destacado / Sin ícono

Ejemplo:

Botón Destacado / Ícono redoneado

Ejemplo:

Botón Destacado / ícono simple

Ejemplo:

Botones Listables

Botón Pequeño / ícono simple

Ejemplo:

Botón Pequeño / listado

Ejemplo:

Botón sin borde

Botón sin borde / con ícono

Ejemplo:

Botón semi-transparente

warning Importante Debe evitarse usar el uc-btn-ghost sobre fondos claros, dado que puede ocasionar problemas de contraste y legibilidad

Botón semi-transparente / ejemplos varios

Ejemplo:

Botones Deshabilitados

Botón Básico / Sin ícono / Deshabilitado

Ejemplo:

Botón Básico / Icono Circular / Deshabilitado

Ejemplo:

Botón Básico / Icono Simple / Deshabilitado

Ejemplo:

Botón Básico / Sin ícono / Deshabilitado

Ejemplo:

Botón Básico / Icono Circular / Deshabilitado

Ejemplo:

Botón Básico / Icono Simple / Deshabilitado

Ejemplo:

Botón Básico / Call to action / Deshabilitado

Ejemplo:

Botón Destacado / Sin ícono / Deshabilitado

Ejemplo:

Botón Destacado / Ícono redoneado / Deshabilitado

Ejemplo:

Botón Destacado / ícono simple / Deshabilitado

Ejemplo:

Botón Pequeño / ícono simple / Deshabilitado

Ejemplo:

Botón Pequeño / listado / Deshabilitado

Ejemplo:

Botón sin borde / con ícono / Deshabilitado

Ejemplo:

warning Importante Debe evitarse usar el uc-btn-ghost sobre fondos claros, dado que puede ocasionar problemas de contraste y legibilidad

Botón semi-transparente / ejemplos varios / Deshabilitado

Ejemplo: