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

Začať 
<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é.