Bug Tracker Active
Button
Tlačítka pomáhají řídit a zachytit akci a záměr uživatele.
Klávesnice
Loading...
Máme tři velikosti
Design system má sedm typů buttonů.
| Varianta | Popis |
|---|---|
| Primární | Slouží k nejdůležitější akci na stránce nebo v dialogu („Odeslat“, „Uložit“, „Pokračovat“). |
| Sekundární | Používá se pro alternativní, méně důležité akce („Zrušit“, „Zpět“) Může jich být na stránce více, ale vždy by měly být vizuálně méně dominantní než primární tlačítko. |
| Plain | Slouží pro doplňkové, nejméně důležité akce („Zobrazit více“, „Další informace“). Používá se tam, kde nechceme odvádět pozornost od hlavních akcí. |
| Danger | Určeno pro akce, které mohou mít negativní nebo nevratný dopad („Smazat“, „Zrušit účet“). Musí být jasně odlišitelné od ostatních tlačítek, aby uživatel rozpoznal rizikovou akci. |
| Warning | Upozorňuje na akci, která vyžaduje zvýšenou opatrnost nebo potvrzení uživatele („Změnit nastavení“). Měl by se používat výjimečně, u akcí s vážnými následky, které nelze snadno vrátit |
| Success | Slouží k potvrzení úspěšného dokončení akce (např. „Hotovo“, „Uloženo“). Používá se pro akce, které vedou k pozitivnímu výsledku nebo úspěšnému dokončení procesu |
| Info | Používá se pro akce, které poskytují doplňující informace nebo spouštějí neutrální procesy (např. „Zobrazit detaily“, „Více informací“). Vhodné pro informativní nebo pomocné funkce |
Každá varianta má svůj stav.
Tlačítka mohou používat ikony jako úvodní vizuální prvek, který zdůrazňuje význam akce. U tlačítek nastavených na velkou velikost je k dispozici možnost použití buď regular, nebo solid ikon. Střední a malá tlačítka by měla používat pouze solid ikony.
Tlačítka mají tooltip pro dovysvětlení akce.
Button vs Link. Často se to plete!.
Používej Button vždy, když má uživatel provést akci.
Používej Link vždy,
když má uživatel změnit kontext nebo přejít jinam.
Nikdy nepoužívej button
jako odkaz a link jako akční prvek — narušuje to očekávání i přístupnost.
Hierarchie tlačítek je nezbytná pro vizuální zdůraznění nejdůležitějších akcí pomocí velikosti, barvy a umístění. Toto stanovení priorit pomáhá uživatelům intuitivně a efektivně se orientovat. Na stránce by měla být pouze jedna primární akce.
Červené tlačítko (Danger) je určeno pouze pro akce s nevratným nebo potenciálně závažným dopadem na data, obsah nebo systém. Jeho cílem je upozornit uživatele, že prováděná operace může vést ke ztrátě dat nebo k jinému významnému důsledku.
Vhodné použití
Použijte červené tlačítko zejména pro akce jako:
Pokud akce vede k nevratné ztrátě dat nebo má významný dopad na uživatele či systém, doporučuje se před jejím provedením zobrazit potvrzovací dialog. Ten by měl jasně vysvětlit:
Kdy červené tlačítko nepoužívat
Červenou barvu nepoužívejte pro běžné akce, jako jsou:
V těchto případech použijte standardní sekundární tlačítko. Nadměrné používání červené barvy snižuje její význam a může vést k přehlížení skutečně rizikových akcí.
Doporučení
Pokud si nejste jistí, zda použít červené tlačítko, položte si otázku: „Může uživatel po stisknutí tohoto tlačítka přijít o data nebo provést akci, kterou nelze snadno vrátit?“ Pokud je odpověď ano, je použití červeného tlačítka pravděpodobně vhodné. Pokud je odpověď ne, použijte standardní variantu tlačítka.
Pokud je dostatek místa, použijte vodorovné zarovnání. To je běžné v dialozích a na kartách. Umístění tlačítek závisí na dostupném prostoru, počtu tlačítek a kontextu tlačítek. Primární tlačítko je zarovnáno doprava.
U vertikálních layoutů používáme zarovnání na full-width.
V případech, kdy máte omezený prostor a více akcí, můžete volby přesunout do dropdown buttonu.
Používejte pouze jedno hlavní tlačítko.
Tlačítka se automaticky zarovnávají na plnou šířku v breakpointu md (360-767).
