Webové komponenty

Tlačidlá

Tlačidlá sa používajú na posun medzi krokmi v rámci procesov. Cieľom je používať jedno tlačidlo na stránku.

Obsah:

Text tlačidla

Text v tlačidle by mal byť krátky a opisovať akciu, ktorá nastane po stlačení daného tlačidla.

Zarovnanie tlačidla

Hlavné tlačidlo zarovnávame na ľavú stranu formulára, v zornom poli používateľa.

<div class="govuk-form-group">
  <label class="govuk-label" for="input-email">
    E-mailová adresa
  </label>
  <input class="govuk-input" id="input-email" name="email"  type="text">
</div>

<button type="submit" class="idsk-button" data-module="idsk-button">
  Uložiť a pokračovať
</button>

Hlavné tlačidlo

Hlavné tlačidlá sa používajú na vykonanie hlavnej akcie na stránke.

Snažte sa vyhnúť použitiu viacerých hlavných tlačidiel na jednej stránke. Je to pretože používateľ môže byť zmätený a nebude vedieť, ktoré tlačidlo treba použiť.

Základná trieda pre tlačidlá je idsk-button. Táto trieda by mala byť vždy prvá a ďalej by mali nasledovať viac špecifické triedy.

Tlačidlá by mali obsahovať data-module="idsk-button" kvôli inicializácií tlačidiel na stránke.

<button type="submit" class="idsk-button" data-module="idsk-button">
  Uložiť a pokračovať
</button>

Design hlavného tlačidla pri jednotlivých stavoch

Tlačidlo začať

Tlačidlo “Začať” príp. “Chcem začať” používame na spustenie služby, procesu, alebo registrácie.

Tento typ tlačidla neodosiela dáta z formulárov preto sa používa <a> tag namiesta <button> tagu.

Pre správne fungovanie tlačidla začať je potrebné použiť triedu idsk-button--start vo vnútri <a> elementu.

Začať

<a href="#" role="button" draggable="false" class="idsk-button idsk-button--start" data-module="idsk-button">
  Začať
  <svg class="idsk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false">
    <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
  </svg></a>

Design tlačidla začať pri jednotlivých stavoch

Bez pseudo triedy
Stav visited
Stav hover
Stav active
Stav focus
Stav focus visited
Stav focus hover
Stav focus active

Sekundárne tlačidlo

Sekundárne tlačidlá používajte na vykonanie vedľajších úloh na stránke.

Vyvarujte sa použitiu priveľa sekundárnych tlačidiel. Veľké množstvo tlačidiel môže byť pre používateľa mätúce a môže viesť k zblúdeniu na stránke. Aj keď napriek tomu budete potrebovať použiť viacero tlačidiel na stránke tak v prvom rade skúste zjednodušiť stránku alebo jej obsah rozdeliť na ďalšie podstránky.

Sekundárne tlačidlá používajú triedu idsk-button--secondary.

<button type="submit" class="idsk-button idsk-button--secondary" data-module="idsk-button">
  Sekundárne tlačidlo
</button>

Design sekundárneho tlačidla pri jednotlivých stavoch

Výstražné tlačidlo

Výstražné tlačidlo je navrhnuté tak aby používateľ dobre zvážil jeho kliknutie naň. Najlepšie fungujú keď sa často nevyskytujú na stránke.

Používajte ich na miestach kde nie je možné sa vrátiť späť alebo napraviť prípadné zmeny, ako napríklad zmazanie účtu.

Výstražné tlačidlo je tiež možné použiť, ako druhotné kde prvý krok je vykonaný cez základné tlačidlo a výstražné sa zobrazí až následne spolu s dialógovým oknom kde bude otázka či naozaj si želáme uskutočniť danú operáciu.

Text výstražného tlačidla by mal byť obzvlášť výstižní pretože stánku môže používať aj zrakovo znevýhodnená osoba a taktiež sa môže stať, že niekto nepochopí význam danej farby.

Výstražné tlačidlá používajú triedu idsk-button--warning.

<button type="submit" class="idsk-button idsk-button--warning" data-module="idsk-button">
  Výstražné tlačidlo
</button>

Design výstražného tlačidla pri jednotlivých stavoch

Neaktívne tlačidlo

Neaktívne tlačidlá by sa nemali používať, ak na to nie je vážny dôvod.

Ak už musíte použiť neaktívne tlačidlo, uistite sa, že jeho dizajn vyzerá tak, že sa naň nedá kliknúť (používa sa 50% priehľadnosť).

Používajte atribút aria-disabled kvôli starším čítačkám obrazoviek.

Príkladom neaktívneho tlačidla sú napr. v kalendároch dni, ktoré už nie je možné zvoliť alebo si na ne rezervovať termín.

Je potrebné používateľovi poskytnúť informáciu, ako môže postupovať ďalej, napr. pridaním pomocného textu s vysvetlením prečo je tlačidlo neaktívne.

Neaktívne tlačidlá používajú triedu idsk-button--disabled.

<button type="submit" disabled="disabled" aria-disabled="true" class="idsk-button idsk-button--disabled" data-module="idsk-button">
  Neaktívne tlačidlo
</button>

Vytváranie tlačidiel

Pri programovaní tlačidiel použite z toolkitu JDMES Sass mixin štýl tlačidiel, ktorý nájdete vo frontend toolkite na JDMES v súbore buttons.scss.

Pri vytváraní tlačidiel dbajte tiež na to, aby sa za tlačidlom nenachádzal obrázok prípadne, aby tlačidlo nebolo inak upravované.

Tlačidlo

• green
• #00703C

Aktívny stav

• yellow
• #FFDF0F

<button type="submit" class="idsk-button" data-module="idsk-button">
  Uložiť a pokračovať
</button>