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 v tlačidle by mal byť krátky a opisovať akciu, ktorá nastane po stlačení daného tlačidla.

<input class="button" type="submit" value="Uložiť a pokračovať">

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

<a class="button button-start" href="#" role="button">Začať</a>

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

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.

<input class="button" type="submit" value="Uložiť a pokračovať" disabled="disabled" aria-disabled="true">

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