Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. Tlačidlá
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="email">
</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.

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

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>