Componenti atomici

Riferimento visivo dei 5 componenti atomici della Fase 2: Button, Input, Badge, Icon, Card.

Button

3 varianti × 3 dimensioni + stati disabled / loading + icone.

Varianti

Dimensioni

Stati

Con icone

Larghezza piena

Input

Campo di testo o select con label, aiuto, stato di errore.

Non condivideremo mai la tua email.

Rata mensile massima accettabile.

Sola lettura.

Badge

6 varianti semantiche × 2 dimensioni. Icona facoltativa.

Varianti

Default Consigliato Nuovo Convalidato Attenzione Errore

Dimensioni

Small Medium

Con icone

Elettrico Benzina Verificato Info

Icon

Wrapper leggero attorno a lucide-vue-next. 22 icone mappate.

Catalogo

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

Dimensioni

Card

3 varianti × 4 padding. Componente statico.

Varianti

Default

Bordo leggero + ombra sottile. Uso comune.

Elevated

Ombra più marcata. Card prominenti (hero, risultato).

Outlined

Solo bordo, nessuna ombra. Più discreto.

Padding

padding="none"

padding="sm" (16px)

padding="md" (24px, predefinito)

padding="lg" (32px)

CarPIQ V2 — Componenti atomici · Home · Design token