Componentes atómicos

Referencia visual de los 5 componentes atómicos de la Fase 2: Button, Input, Badge, Icon, Card.

Button

3 variantes × 3 tamaños + estados disabled / loading + iconos.

Variantes

Tamaños

Estados

Con iconos

Ancho completo

Input

Campo de texto o select con label, ayuda, estado de error.

Nunca compartiremos tu correo.

Cuota mensual máxima aceptable.

Solo lectura.

Badge

6 variantes semánticas × 2 tamaños. Icono opcional.

Variantes

Default Recomendado Nuevo Validado Atención Error

Tamaños

Small Medium

Con iconos

Eléctrico Gasolina Verificado Info

Icon

Wrapper ligero en torno a lucide-vue-next. 22 iconos mapeados.

Catálogo

arrow
arrow-left
check
close
loader
chevron-down
chevron-up
chevron-left
chevron-right
menu
search
alert
info
help
external
plus
minus
car
euro
zap
fuel
settings

Tamaños

Card

3 variantes × 4 paddings. Componente estático.

Variantes

Default

Borde ligero + sombra sutil. Uso habitual.

Elevated

Sombra más marcada. Cards prominentes (hero, resultado).

Outlined

Solo borde, sin sombra. Más discreto.

Paddings

padding="none"

padding="sm" (16px)

padding="md" (24px, predeterminado)

padding="lg" (32px)

CarPIQ V2 — Componentes atómicos · Inicio · Design tokens