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