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čidiel
Text v tlačidle by mal byť krátky a opisovať akciu, ktorá nastane po stlačení daného tlačidla.
<button type="submit" class="govuk-button" data-module="govuk-button">
Uložiť a pokračovať
</button>
Tlačidlo začať
Tlačidlo “Začať” príp. “Chcem začať” používame na spustenie služby, procesu, alebo registrácie.
<a href="#" role="button" draggable="false" class="govuk-button govuk-button--start" data-module="govuk-button">
Začať
<svg class="govuk-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>
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="govuk-button" data-module="govuk-button">
Uložiť a pokračovať
</button>
Neaktívne tlačidlá
- 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.
<button type="submit" disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--disabled" data-module="govuk-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.
Tlačidlo
- green
- #006435
Aktívny stav
- yellow
- #FFBF47
<button type="submit" class="govuk-button" data-module="govuk-button">
Uložiť a pokračovať
</button>
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é.