Component library

Sistema de botones para UI

Grupos de botones listos para clase o para proyectos reales: estados principal, hover, click y selected, más una colección de 15 estilos por tendencias con efectos reales al pasar el ratón y al hacer clic.

Cómo usarlos

Un patrón de estados simple y consistente

La idea es que definas un patrón de estados y lo repitas en todos los tipos de botón: principal, secundario, ghost, destructivo, sutil… Así el usuario reconoce qué está pasando sin tener que “aprender” cada pantalla nueva.

• Principal: el botón base, el que debería usarse para la acción más importante en cada pantalla.

• Hover: un ligero cambio de color/sombra que indica que el botón es interactivo, sin romper la jerarquía visual.

• Click: un estado presionado (pressed) que da sensación de respuesta física, normalmente con menos sombra y un poco de “hundido”.

• Selected: pensado para botones tipo filtro, tabs o toggles, donde el botón se queda activo para indicar una selección.

Principal
Hover
Click
Selected

Sistemas de botones

Grupos de botones con sus cuatro estados

Cada tarjeta es un mini sistema de botones. Puedes copiar solo uno o combinarlos, y adaptar los colores a cualquier paleta de KIT UX UI.

Primary solid

Botón principal para llamadas a la acción importantes: envíos de formularios, CTAs de compra, acciones clave en flows de producto.

Principal

Hover

Click

Selected

Recomendación: usarlo solo una vez por pantalla como CTA principal y combinar con secundarios más discretos.

Secondary outline

Botón secundario para acciones importantes, pero no críticas. Funciona bien junto al primary como “acción alternativa”.

Principal

Hover

Click

Selected

Útil para acciones como “Más información”, “Ver detalles” o “Cancelar” cuando no es destructivo.

Ghost dark

Botón sin relleno, pensado para interfaces oscuras donde no quieres robar protagonismo al contenido: filtros, acciones secundarias, controles en barras superiores.

Principal

Hover

Click

Selected

Ideal para menús secundarios, barras de herramientas y acciones poco intrusivas.

Destructive

Botón para acciones peligrosas: borrar, cancelar suscripción, eliminar cuenta, resetear datos. Debe destacar pero usarse con mucho cuidado.

Principal

Hover

Click

Selected

Combínalo siempre con textos claros, confirmaciones y, si hace falta, un diálogo previo.

Soft / subtle

Botones más suaves pensados para chips, filtros, selecciones múltiples o acciones que se repiten mucho en la interfaz.

Principal

Hover

Click

Selected

Buen candidato para filtros de contenido, estados de tabs o chips seleccionables.

Por estilo y tendencias

Aquí tienes botones por tendencias: glassmorphism, clay, neobrutalismo, pixel UI, gradient-heavy, corporativo…. Cada botón tiene efecto real de hover y onclick para que puedas ver el comportamiento directamente en la web.

Glassmorphism neon

Botón glass para fondos oscuros, con blur y borde neón en el hover.

Claymorphism soft

Botón arcilla con volumen suave y sombras que simulan pieza física.

Neobrutalist

Bloque plano, colores fuertes, borde negro y sombra desplazada muy visible.

Pixel retro UI

Botón cuadrado, look 8-bit y tipografía monospace, perfecto para pixel kits.

Clean minimalist

Estilo súper limpio, fondo claro y sombra suave. Ideal para productos calmados.

Corporate blue

Botón azul corporativo para SaaS y dashboards serios, con hover más intenso.

Gradient pill

Pastilla con degradado violeta-cyan-magenta, muy de landing moderna.

Outline neon

Solo contorno y brillo, perfecto para segundas acciones en UI oscuras.

Ghost light

Casi invisible hasta el hover; ideal cuando el contenido manda.

Success pill

Botón verde para acciones de éxito: confirmar, guardar, completar.

Warning badge

Amarillo intenso para avisos importantes: riesgo, cambios críticos.

Danger ghost

Botón “peligro” en versión ghost, menos agresivo que el destructivo sólido.

Text link

Botón-enlace minimal, ideal para “Ver más”, enlaces secundarios y microacciones.

Mono icon

Botón dark con aire dev/data, perfecto para herramientas técnicas.

Tonal chip

Chip tonal para filtros, tags o selecciones múltiples en listas y grids.