Composants atomiques

Référence visuelle des 5 composants atomiques de la Phase 2 : Button, Input, Badge, Icon, Card.

Button

3 variantes × 3 tailles + états disabled / loading + icônes.

Variantes

Tailles

États

Avec icônes

Pleine largeur

Input

Champ texte ou select avec label, help, error state.

Nous ne partagerons jamais votre email.

Mensualité maximale acceptable.

Lecture seule.

Badge

6 variantes sémantiques × 2 tailles. Icône optionnelle.

Variantes

Default Recommandé Nouveau Validé Attention Erreur

Tailles

Small Medium

Avec icônes

Électrique Essence Vérifié Info

Icon

Wrapper léger autour de lucide-vue-next. 22 icônes mappées.

Catalogue

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

Tailles

Card

3 variantes × 4 paddings. Composant statique.

Variantes

Default

Bordure légère + ombre subtile. Usage courant.

Elevated

Ombre plus marquée. Cards prominentes (hero, résultat).

Outlined

Bordure seule, pas d'ombre. Plus discret.

Paddings

padding="none"

padding="sm" (16px)

padding="md" (24px, défaut)

padding="lg" (32px)

CarPIQ V2 — Composants atomiques · Accueil · Design tokens