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