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:

Cargando ...
Botón Básico / Icono Circular

Ejemplo:

Cargando ...
Botón Básico / Icono Simple

Ejemplo:

Cargando ...

Botones secundarios

Botón Básico / Sin ícono

Ejemplo:

Cargando ...
Botón Básico / Icono Circular

Ejemplo:

Cargando ...
Botón Básico / Icono Simple

Ejemplo:

Cargando ...

Botón de acción

Botón Básico / Call to action

Ejemplo:

Cargando ...

Botones Destacados

Botón Destacado / Sin ícono

Ejemplo:

Cargando ...
Botón Destacado / Ícono redoneado

Ejemplo:

Cargando ...
Botón Destacado / ícono simple

Ejemplo:

Cargando ...

Botones Listables

Botón Pequeño / ícono simple

Ejemplo:

Cargando ...
Botón Pequeño / listado

Ejemplo:

Cargando ...

Botón sin borde

Botón sin borde / con ícono

Ejemplo:

Cargando ...

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:

Cargando ...

Botones Deshabilitados

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

Ejemplo:

Cargando ...
Botón Básico / Icono Circular / Deshabilitado

Ejemplo:

Cargando ...
Botón Básico / Icono Simple / Deshabilitado

Ejemplo:

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

Ejemplo:

Cargando ...
Botón Básico / Icono Circular / Deshabilitado

Ejemplo:

Cargando ...
Botón Básico / Icono Simple / Deshabilitado

Ejemplo:

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

Ejemplo:

Cargando ...
Botón Destacado / Sin ícono / Deshabilitado

Ejemplo:

Cargando ...
Botón Destacado / Ícono redoneado / Deshabilitado

Ejemplo:

Cargando ...
Botón Destacado / ícono simple / Deshabilitado

Ejemplo:

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

Ejemplo:

Cargando ...
Botón Pequeño / listado / Deshabilitado

Ejemplo:

Cargando ...
Botón sin borde / con ícono / Deshabilitado

Ejemplo:

Cargando ...
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:

Cargando ...