Button
Slouží ke spuštění akce nebo k přechodu na další stránku jedním kliknutím.
Použití
- Obvykle je umístěno v dialozích, modálních oknech, formulářích, kartách apod.
- Tlačítko musí být rozpoznatelné jako interaktivní prvek na stránce.
- Vnímatelné musí být i jednotlivé stavy tlačítka.
- Je snadno dohledatelné mezi ostatními prvky na stránce.
- Tlačítko s největším významem tzv. CTA (call to action) je nejvýraznější a jediné na stránce. Reprezentuje hlavní cíl stránky např. odeslání formuláře, zaplacení objednávky apod.
- Hlavní tlačítko může být doplněno o další tlačítka s menším významem, jejichž podoba odpovídá důležitosti (např. obrysové či textové tlačítko).
- Popisek tlačítka odpovídá akci, která nastane, když uživatel na tlačítko klikne. Pro maximální čitelnost se doporučuje textace na jednom řádku s max. délkou 20 znaků.
- Pro zvýraznění funkce tlačítka lze zvolit výstražnou barvu např. error pro odstranění, success pro potvrzení. Používání těchto tlačítek by mělo být konzistentní napříč celým webem (aplikací) a neměla by být nadužívaná vůči primární barvě tlačítka, např. zobrazují se pouze v modální oknech apod.
Typy tlačítek
Existuje několik druhů tlačítek, které se liší podle kontextu jejich použití. Pro každé tlačítko existují speciální CSS třídy, a to konkrétně třídy, které řeší - typ tlačítka, velikost, stav (disable state) popř. speciální třída pro speciální typ tlačítka.
Velikosti tlačítek
- Tlačítko použijte v různých velikostech v závislosti na prostoru, který máte na stránce
- Pro důležitější akce použijte větší tlačítko
- Velikost “Small” je vhodná především pro nižší třídy tlačítek
- U tlačítek, která jsou umístěna v řádku vedle sebe, dodržujte vždy stejnou velikost