Chip / UspTag

Utility rodina — ne marketing marka (to je Badge). Chip je interaktivní: filtr toggle, odebíratelný tag, počet. USP je centrální slovník výhod ve dvou formách: pill (UspTag) a benefit bar s ikonou v kolečku (UspItem / UspStrip).

8
USP taxonomie
sdílený slovník
2
USP formy
bar (kolečko) · pill
filtr
Toggle / tag
✓ · count · ×
glass
Na tmavém
USP přes hero

USP bar

Benefit pruh — ikona v tintovaném kolečku + label. Vizuálně jiné než corner-flag marka. Pro trust pruh přes hero nebo pod košík.

Doprava zdarma

Skladem

Lab-tested

Vrácení 30 dní

onDark — přes hero

Doprava zdarma

Skladem

Expedice dnes

USP item

Jeden benefit s volitelným popisem — do PDP odrážek a feature bloků.

Doprava zdarma

Při objednávce nad 1 000 Kč

Lab-tested

Každá šarže nezávisle ověřena

Vrácení 30 dní

Bez udání důvodu

Vyrobeno v EU

Výroba v certifikovaném provozu

Filtr & tagy

Interaktivní rodina, kterou Badge nemá: toggle (✓ při aktivním), odebíratelný tag (×), počet.

Toggle filtr

SklademDoprava zdarmaVeganBez GMO

Odebíratelné tagy

VeganBez GMOdo 500 Kč

S počtem

Filtry3Kategorie12

Chip tóny

Pill forma do husté řady. Soft tinty; glass pro tmavý.

NeutralBrandSuccessInfo

Velikosti

sm 24 · md 32px (default).

Doprava zdarmaDoprava zdarma

Glass na gradientu

UspTag pill v glass variantě — USP řada přes hero / foto.

grad-cover

SklademDoprava zdarmaLab-tested

Props & pravidla

<Chip>

components/ui/chip.tsx
PropTypDefaultPoužití
tone"neutral" | "brand" | "success" | "info" | "glass""neutral"Soft tint / glass
size"sm" | "md""md"24 / 32px
iconLucideIcon—Leading ikona
selectedbooleanfalseFiltr aktivní → deep green + ✓
interactivebooleanfalseToggle (cursor + aria)
removablebooleanfalseTrailing × (onRemove)
countnumber—Trailing počet

USP — UspTag / UspItem / UspStrip

components/shared/usp-tag.tsx
PropTypDefaultPoužití
UspTag uspUspKey—Pill forma (8 USP)
UspItem usp + description?UspKey · string—Ikona v kolečku + popis
UspStrip itemsUspKey[]—Řada UspItemů (bar)
onDarkbooleanfalseGlass kolečko + světlý text
  • Badge = marketing corner-flag marka na kartě.
  • Chip = interakce — filtr toggle (✓), odebíratelný tag (×), počet.
  • USP = trust slovník (USP_META) ve dvou formách: pill (UspTag) a bar s kolečkem (UspItem / UspStrip).