Grup de butoane

Prezentare

Ordonează vizual acțiunea principală și alternativele ei, astfel încât ordinea și ierarhia să rămână neambigue.

Când se folosește

• ori de câte ori un ecran are mai mult de o acțiune (de exemplu „Trimite” și „Salvează și continuă mai târziu”).

Când nu se folosește

• pentru o singură acțiune izolată — un `button-group` cu un singur element nu aduce valoare față de butonul simplu.

Anatomie

Un `<div class="sd-button-group">` (flex, wrap) care conține direct elementele `sd-button` sau linkuri de acțiune secundară.

Variante

• implicit — pe ecrane sub 30rem lățime, butoanele devin pe toată lățimea, stivuite vertical

Stări

• nu are stări interactive proprii

Comportament

Layout pur CSS (flexbox); fără JavaScript. Pe ecrane înguste, `flex-direction: column` și lățime 100% pentru fiecare buton, printr-un media query, nu prin JavaScript de detectare a viewport-ului.

Reguli de conținut

• acțiunea principală e primul element din grup, nu ultimul — ordinea vizuală urmează ordinea de citire.

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';

<div class="sd-button-group"><button class="sd-button sd-button--primary" type="button">Trimite cererea</button><a class="sd-link" href="#">Salvează și revino</a></div>

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).