Tlačidlo (Button)
Tlačidlá patria medzi najdôležitejšie interakčné prvky v digitálnych službách verejnej správy. Pomáhajú používateľom vykonať akciu, potvrdiť voľbu alebo pokračovať v procese. V IDSK 3 sú tlačidlá navrhnuté tak, aby podporovali jasnú hierarchiu akcií – od najdôležitejšej po doplnkovú.
Použitie tlačidiel
Komponent tlačidlo pozostáva z piatich základných častí. Kľúčovým prvkom je textový popis, ktorý musí jasne, stručne a konkrétne pomenovať vykonávanú akciu. Vizuálnu podobu, tvar a veľkosť definuje kontajner, ktorého výplň a farba určujú dôležitosť tlačidla v hierarchii rozhrania. Význam akcie môžu voliteľne dopĺňať ľavá alebo pravá ikona, ktoré slúžia ako vizuálna podpora textu. Celkovú funkčnosť uzatvára interakčná plocha, ktorá musí byť dostatočne veľká na to, aby umožňovala pohodlné a presné ovládanie na všetkých typoch zariadení.
Správne nastavená vizuálna hierarchia pomáha používateľovi identifikovať hlavnú výzvu na akciu (CTA) a znižuje kognitívnu záťaž pri rozhodovaní. V IDSK 3 používame tri úrovne priority: primárne pre kľúčové akcie, sekundárne pre vedľajšie, menej dôležité voľby a terciárne (textové) pre doplnkové akcie s najnižšou dôležitosťou.
Ako sa používa
- Na jednej stránke používajte spravidla iba jedno primárne tlačidlo.
- Text musí mať stručnú a jasnú menovku (napr. "Odoslať", "Uložiť").
- Akcie klaďte vedľa seba v poradí dôležitosti (napr. Späť ako sekundárne, Pokračovať ako primárne).
- Pri dôležitých akciách implementujte ochranu proti viacnásobnému odoslaniu.
Ako sa nepoužíva
- Nepoužívajte viacero primárnych tlačidiel na stránke.
- Nepoužívajte tlačidlá na bežnú navigáciu medzi stránkami, ak nejde o súčasť procesu.
- Vyhnite sa nápisom ako „Kliknite tu“ alebo „OK“, ktoré nevysvetľujú kontext akcie.
- Nepoužívajte tlačidlá obsahujúce iba ikonu bez textu, pokiaľ nejde o všeobecne známe symboly.
- Pri hierarchicky rovnocenných možnostiach (napr. Áno a Nie) používajte hierarchicky rovnocenné tlačidlá
Varianty a stavy
1. Varianty tlačidla – primárne, sekundárne, textové
2. Typy tlačidla – úspešné, výstražné, neaktívne
3. Veľkosti tlačidla – veľké, stredné, malé
4. Konfigurácie tlačidla – s ikonkou naľavo, s ikonkou napravo, iba ikonka
Prístupnosť (Accessibility)
Komponent tlačidlo spĺňa požiadavky WCAG 2.1 AA. Podporuje ovládanie klávesnicou a asistenčnými technológiami.
Klávesové ovládanie
Tab– presun zamerania klávesnice (focus) na nasledujúci rázcestník alebo interaktívny prvok.Shift + Tab– presun zamerania klávesnice (focus) na predchádzajúci prvok.Enter,Space– aktivovanie tlačidla (spustenie akcie).
Základné pravidlá prístupnosti
- Vždy jasne definujte atribút
type(zvyčajne"button","submit"alebo"reset"), aby ste predišli nechcenému odoslaniu formulára. - Text musí byť jasný, opisný a krátky (1–2 slová). Ideálne by mal začínať slovesom (napr. "Odoslať", "Uložiť", "Pokračovať", "Zmeniť heslo").
- Ak tlačidlo obsahuje iba ikonu (napr. krížik na zatvorenie alebo lupu na vyhľadávanie), asistenčné technológie nebudú vedieť, čo robí. Vždy mu musíte pridať atribút
aria-label(napr.aria-label="Vyhľadať na webe"). - Zameriavací rámik je pre prístupnosť kľúčový. Náš komponent automaticky využíva
focus-visibles výraznou oranžovou farbou ID-SK na jasnú identifikáciu zvoleného prvku. - Pri kritických akciách (napríklad odosielanie platieb alebo formulárov) po stlačení nastavte stav tlačidla na
disabled, čím zabránite opakovanému vykonaniu rovnakej akcie.
Implementácia tlačidla z ID-SK Frontend
Komponenty z knižnice ID-SK Frontend môžete do svojho projektu integrovať dvoma spôsobmi v závislosti od vašej technologickej infraštruktúry:
- Statická HTML implementácia – vhodná pre projekty bez Node.js alebo bundlera.
- Pokročilá integrácia (NPM + SCSS + JS) – vhodná pre projekty so správou zdrojov a build procesom.
Základné požiadavky
Pred začiatkom integrácie sa uistite, že máte:
- Node.js: verzia 4.2.0 alebo vyššia.
- Dart Sass: verzia 1.0.0 alebo vyššia.
- Nunjucks: verzia 3.0.0 alebo vyššia (ak chcete používať makrá).
Možnosti implementácie
1. Statická HTML implementácia (HTML + minifikované súbory)
Ak váš projekt nevyužíva Node.js alebo bundler (napr. Webpack, Vite), môžete použiť hotové buildy. Pri inštalácii z dist sa používajú kompilované a minifikované verzie šablóny so štýlmi. To znamená, že nebudete môcť:
- selektívne zahrnúť CSS alebo JavaScript pre jednotlivé komponenty
- zostaviť si vlastné štýly alebo komponenty na základe palety alebo typografických kombinácií
- prispôsobiť si kód (napríklad prepísať farby alebo povoliť globálne štýly)
- použiť dynamické komponenty z Nunjucks šablón
Stiahnite si najnovšie kompilované a minifikované verzie šablón štýlov, JavaScript a assetov. Skopírujte celý assets priečinok a minifikované súbory do rootu vášho projektu. Štruktúra by mala vyzerať približne takto:
project/
│
├── assets - images
- fonts
├── index.html
├── frontend.min.css
├── frontend.min.js
├── frontend.min.css.map
└── frontend.min.js.mapDo časti head vložte minifikované css. Na záver body pripojte minifikovaný javascript a inicializujte ho.
<!DOCTYPE html>
<html>
<head>
<title>Ukážka</title>
<link rel="stylesheet" href="frontend.min.css">
</head>
<body>
<script type="module" src="./frontend.min.js"></script>
<script type="module">
import { initAll } from './frontend.min.js'
initAll()
</script>
</body>
</html>Zo stránky dokumentácie stiahnite HTML kód komponentu tlačidlo (otvorí sa v novom okne) a vložte ho do svojho HTML.
<button type="submit" class="govuk-button govuk-button__basic" data-module="govuk-button">
Primárne tlačidlo
</button>2. Pokročilá integrácia (NPM + SCSS + JS)
- Nainštalujte balíkPre inštaláciu cez NPM spustite (po skončení inštalácie sa balík
@id-sk/frontendobjaví vnode_modules):npm install nunjucks --save npm i @id-sk/frontend@3.0.0-beta.0-hotfix - Pridajte Nunjucks/HTMLDo pripraveného súboru (či už .html alebo .njk) vložte kód, ktorý nájdete vyššie.
- Importujte štýlyPre import individuálneho IDSK komponentu (tlačidlo) do svojho Sass súboru pridajte:
@import "node_modules/@id-sk/frontend/idsk/components/button/button"; - Importujte JavascriptID-SK komponenty s JavaScript správaním je nutné inicializovať. Pre inicializáciu konkrétneho komponentu tlačidlo použite tento kód:
import { Button, initAll } from 'govuk-frontend' // Naštartovanie všetkých komponentov na stránke naraz (odporúčané) initAll()