Atomaire componenten

Visuele referentie van de 5 atomaire componenten van Fase 2: Button, Input, Badge, Icon, Card.

Button

3 varianten × 3 maten + toestanden disabled / loading + iconen.

Varianten

Maten

Toestanden

Met iconen

Volledige breedte

Input

Tekst- of selectveld met label, hulp, foutstatus.

E-mailadres

Wij delen uw e-mail nooit.

Maandbudget (€)

Maximaal aanvaardbare maandaflossing.

Land *

E-mailadres

Ongeldig e-mailformaat.

Uitgeschakeld veld

Referentie

Alleen-lezen.

Badge

6 semantische varianten × 2 maten. Optioneel icoon.

Varianten

Default

Aanbevolen

Nieuw

Bevestigd

Let op

Fout

Maten

Small

Medium

Met iconen

Elektrisch

Benzine

Geverifieerd

Info

Icon

Lichte wrapper rond lucide-vue-next. 22 gemapte iconen.

Catalogus

arrow

arrow-left

check

loader

chevron-down

chevron-up

chevron-left

chevron-right

alert

info

help

external

plus

minus

car

euro

zap

fuel

settings

Maten

Card

3 varianten × 4 paddings. Statische component.

Varianten

Default

Lichte rand + subtiele schaduw. Gangbaar gebruik.

Elevated

Sterkere schaduw. Prominente cards (hero, resultaat).

Outlined

Alleen rand, geen schaduw. Discreter.

Paddings

padding="none"

padding="sm" (16px)

padding="md" (24px, standaard)

padding="lg" (32px)

CarPIQ V2 — Atomaire componenten · Home · Design tokens