Badge
Štítky shopu. Produktové marky (Badge — marketing, atributy, stav) a kategoriální identita (CategoryBadge — piktogram + název v barvě kategorie). Finishe: solid, soft, gradient, liquid glass.
Marketingové marky
Solidní, hlasité — jeden produkt nese max jednu marketingovou marku.
Atributy & trust
Soft tinty — vlastnosti produktu, klidně víc vedle sebe.
Stav & neutrál
Dostupnost a neutrální štítky.
Akcent kategorie
Prop category přebarví marku na barvu kategorie — soft tint, nebo plný gradient přes gradient.
Velikosti
sm 20 · md 24 (default) · lg 28px.
S ikonou & tečkou
lucide ikona leading, nebo stavová tečka (dědí barvu textu).
Brand & glass
brand = deep forest gradient (green-950 → 700) jako značkový výběr / doporučení. glass = liquid glass nad gradientem nebo fotem (akcentní registr brandu).
glass — jen nad gradientem / fotem
Badge — props & pravidla
<Badge>
components/ui/badge.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| variant | novinka | bestseller | sleva | akce | vegan | bezGMO | skladem | vyprodano | outline | neutral | brand | glass | "neutral" | Vizuální + významová varianta |
| size | "sm" | "md" | "lg" | "md" | 20 / 24 / 28px |
| category | CategoryKey | — | Přebije barvu akcentem kategorie |
| gradient | boolean | false | S category: plný gradient místo soft |
| icon | LucideIcon | — | lucide ikona (leading) |
| dot | boolean | false | Stavová tečka (skladem / vyprodáno) |
- Max jedna marketingová marka na produkt (novinka / bestseller / sleva).
- Atributy (vegan, bez GMO) můžou být vedle sebe.
- Rohové umístění = absolutní wrapper kolem Badge, ne pozice uvnitř komponenty.
brand= deep gradient (green-950 → 700), značkový výběr;glassjen nad gradientem / fotem.
Kategoriální badge — varianty
CategoryBadge = identita kategorie (piktogram + název v barvě kategorie). Na rozdíl od akcentu výše vždy nese glyf — štítek, hlavička i filtr. 6 tónů.
Všech 5 kategorií
Barva + piktogram tvoří identitu. Soft pro štítky, solid pro hlavičky, gradient pro hero momenty.
Glass na gradientu
Varianta glass = liquid glass chip nad kategoriálním gradientem. Glyf i text bílé, barvu nese gradient za sklem — pro hero a hlavičky kategorií.
grad-cat-vitamins
grad-cat-organs
Filtr & řazení
Interaktivní chip. selected přepne na solid, ať je aktivní volba jasná. (Tady staticky — Adaptogeny aktivní.)
Velikosti kategorie
sm 24 · md 28 (default) · lg 36px.
Bez piktogramu
showGlyph=false — čistě textový chip, když ikona ruší (husté filtry).
CategoryBadge — props & pravidla
<CategoryBadge>
components/shared/category-badge.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| category | CategoryKey | — | Kategorie (povinné) |
| variant | "soft" | "solid" | "outline" | "ghost" | "glass" | "gradient" | "soft" | Tón |
| size | "sm" | "md" | "lg" | "md" | 24 / 28 / 36px |
| label | string | CATEGORY_LABELS | Přepiš název |
| showGlyph | boolean | true | Zobraz piktogram |
| selected | boolean | false | Filtr aktivní → solid |
| interactive | boolean | false | Cursor + hover (filtr) |