Atomic components

Visual reference of the 5 atomic components for Phase 2: Button, Input, Badge, Icon, Card.

Button

3 variants × 3 sizes + disabled / loading states + icons.

Variants

Sizes

States

With icons

Full width

Input

Text or select field with label, help and error state.

Email address

We will never share your email.

Monthly budget (€)

Maximum acceptable monthly payment.

Country *

Email address

Invalid email format.

Disabled field

Reference

Read only.

Badge

6 semantic variants × 2 sizes. Optional icon.

Variants

Default

Recommended

New

Validated

Warning

Error

Sizes

Small

Medium

With icons

Electric

Petrol

Verified

Info

Icon

Lightweight wrapper around lucide-vue-next. 22 mapped icons.

Catalog

arrow

arrow-left

check

loader

chevron-down

chevron-up

chevron-left

chevron-right

alert

info

help

external

plus

minus

car

euro

zap

fuel

settings

Sizes

Card

3 variants × 4 paddings. Static component.

Variants

Default

Light border + subtle shadow. Common usage.

Elevated

Stronger shadow. Prominent cards (hero, results).

Outlined

Border only, no shadow. More discreet.

Paddings

padding="none"

padding="sm" (16px)

padding="md" (24px, default)

padding="lg" (32px)

CarPIQ V2 — Atomic components · Home · Design tokens