Button

Markup canonic · components/button.json

sursa = JSON · generat de scripts/build-catalog.py

Variante

.btn .primary / .secondary / .ghost / .outline / .outline-pink · (distructiv → secțiune separată)

Disabled

orice variantă + atribut disabled · opacity 0.4 · cursor not-allowed

Mărimi

Două mărimi principale: md (40h / fs 14) default în dashboard, lg (44h / fs 16) pentru acțiuni principale (modal submit, hero CTA, formulare 1–3 câmpuri). Btn mici (sm 30h / xs 26h) sunt pill — la dimensiuni reduse, pill citește mai clar.

.lg · default (md) · .sm · .xs

Reguli

Default (md) · dashboard

40h · fs 14 · weight 600 · padding-x 24 · radius 20. Folosit în dashboard, table actions, topbar, navigation — contexte dense.

Large (lg) · acțiune principală

44h · fs 16 · weight 600 · padding-x 32 · radius 24. Folosit pe modal submit, hero CTA, formulare 1–3 câmpuri — contexte unde butonul e the acțiunea.

Small (sm) · inline

30h · fs 13 · padding-x 18 · radius pill. Filtrele din tabele, acțiuni inline, badge-uri acționabile.

Xs · micro-acțiune

26h · fs 12 · padding-x 14 · radius pill. În ticker AI, chip-uri acționabile, controls minimale.

Shadow

--sh-pink apare doar la hover pe .btn.primary. Zero shadow în starea default.

Focus states

Vizibile doar la navigare cu tastatura (:focus-visible). Color: --c-fog pe suprafețe deschise, #fff pe dark.

:focus-visible · outline 2px var(--c-fog) · offset 3px
sec-dark · outline-color: #fff

Ștergere & acțiuni distructive

Distructivul e negru și mereu cu iconiță. Butonul negru e rezervat exclusiv acestor acțiuni — nu e o variantă neutră. .btn.danger = ștergere principală (fill negru); .btn.danger.outline = acțiune distructivă cu impact mai mic (border ink). Anulările și acțiunile reversibile rămân ghost / outline / secondary, niciodată negre. Roșul (--c-error) e rezervat mesageriei de eroare, nu butoanelor.

.btn.danger (fill negru) · .btn.danger.outline (impact mic) · iconiță obligatorie

Cu iconiță & states