Button / CTA
Akce. 4-tier hierarchie (Primary / Secondary soft / Outline / Liquid glass) + brand a utility varianty. Vše General Sans SemiBold 600, pill tvar — hierarchie přes barvu + bg.
Hierarchie — 4 tiery
Vybírej shora dolů podle váhy akce. Tyhle čtyři jsou výchozí nabídka.
Primary
variant="primary"Default akce — Do košíku, Pokračovat
Secondary
variant="secondary"Soft companion — sage, hover přejde na solid
Outline
variant="outline"Neutrální / zrušit akce
Liquid glass
variant="glass"Kontextová Primary — JEN nad gradient / foto
Brand kontextové
Liší se barvou — pro konkrétní momenty.
Vivid
variant="vivid"Energetické hero CTA — vivid green
Sale
variant="sale"Akce, sleva, výprodej
Premium
variant="premium"Prémiová řada, editorial moment
Utility
Ghost, inline text link, icon-only.
Ghost
variant="ghost"Terciární akce, toolbary
Text link
variant="text"Inline odkaz, underline on hover
Icon-only
variant="icon"Čtvercový, aria-label povinný
Ikony
lucide ikona leading (default) nebo trailing. Velikost se ladí dle size CTA.
Velikosti
sm 32 · md 44 (default) · lg 52 · xl 60px. Výška přes size, šířka dle obsahu.
Stavy
Hover / active / focus jsou interaktivní (vyzkoušej myší a klávesnicí). Disabled a loading jsou vidět staticky.
Props & pravidla
<Cta>
components/ui/cta.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| variant | primary | vivid | secondary | outline | glass | sale | premium | ghost | text | icon | "primary" | Vizuální + hlasová varianta |
| size | "sm" | "md" | "lg" | "xl" | "md" | 32 / 44 / 52 / 60px |
| icon | LucideIcon | — | lucide komponenta (leading / trailing / icon-only) |
| iconPosition | "leading" | "trailing" | "leading" | Pozice ikony |
| loading | boolean | false | Spinner + disabled |
- Na stránce jedna primary akce; zbytek secondary / outline / ghost.
glassjen nad gradientem / fotem (potřebuje texturu za sebou).iconvyžadujearia-label.- Sentence case, General Sans SemiBold — žádné VERZÁLKY (hierarchii řeší barva + bg).
- Pro odkaz zabal do
<Link>nebo použijvariant="text".