Buton

Prezentare

Declanșează o acțiune și îi comunică prin text consecința, nu doar eticheta generică a unei acțiuni.

Când se folosește

• pentru orice acțiune care nu navighează direct către o altă adresă (trimitere, salvare, ștergere) — pentru navigare pură se preferă un `link`;
• cu `sd-button--primary` pentru acțiunea principală a ecranului, cel mult una vizibilă simultan.

Când nu se folosește

• pentru navigare simplă către o altă pagină — acolo `link`-ul (`<a>`) e elementul corect, inclusiv vizual;
• cu mai mult de un `sd-button--primary` vizibil simultan — ambiguizează acțiunea principală.

Anatomie

Un `<button class="sd-button sd-button--primary|sd-button--secondary" type="button|submit">`, text simplu, fără markup imbricat suplimentar.

Variante

• `sd-button--primary` — acțiunea principală, contrast maxim
• `sd-button--secondary` — acțiuni alternative (înapoi, salvează și continuă mai târziu)

Stări

• implicit
• :hover
• :active (doar primary)
• :disabled / `aria-disabled="true"`
• :focus-visible

Comportament

Element `<button>` HTML nativ. `aria-disabled="true"` e tratat vizual identic cu `:disabled`, dar rămâne focusabil — util când motivul dezactivării trebuie explicat, spre deosebire de `disabled` nativ, care exclude complet elementul din tab order.

Reguli de conținut

• textul descrie acțiunea și consecința ei („Trimite cererea”, „Descarcă documentul”), niciodată generic („OK”, „Submit”, „Click aici”) — conform docs/content/content-style-guide.md#microcopy-pentru-actiuni.

Responsabilitățile implementatorului

• alege `aria-disabled="true"` în loc de `disabled` nativ atunci când persoana are nevoie să înțeleagă de ce butonul e indisponibil momentan (de exemplu în timpul trimiterii).

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/49 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/forms.css';

<button class="sd-button sd-button--primary" type="button">Continuă</button>

Contract și surse

• Documentația familiei Formulare
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).