ToggleButton

Otevřít ve Figmě

Toggle Button je tlačítko, které slouží jako přepínač mezi dvěma (nebo více) stavy.

Klávesnice

Anatomie

Aktivní stav
Neaktivní stav

Použité komponenty

Button Notification Badge Tooltip

Vlastnosti

ToggleButton vychází z komponenty Button a přináší vlastní nastavení pouze pro volbu stavů. Ostatní vlastnosti, například iconOnly, jsou součástí nastavení komponenty Button.

Stav	Popis
Checked	Aktivní stav ToggleButtonu.
Unchecked	Neaktivní stav ToggleButtonu.
Hover	Stav při najetí kurzorem na aktivní nebo neaktivní ToggleButton.
Disabled	Neaktivní ovládání, které nereaguje na uživatelskou akci.

Použití

Kdy používáme

Pokud uživatel zapíná nebo vypíná lokální funkci či zobrazení a aktuální stav musí být stále viditelný, například při přepnutí tmavého režimu.
Pro kompaktní ovládání v nástrojové liště, například pro změnu směru řazení nebo zobrazení panelu s filtry.
Pro ikonovou variantu pouze tehdy, když ikony jednoznačně vyjadřují význam obou stavů.

Kdy nepoužíváme

Pokud je přepínač součástí formuláře. Pro volbu potvrzovanou s formulářem použij Checkbox, pro okamžitě aplikované nastavení Switch.
Pokud uživatel vybírá jednu nebo více hodnot z množiny možností. Použij Radio Button Group, Select nebo Segment Control podle počtu a kontextu voleb.
Pokud akce nemá trvalý aktivní a neaktivní stav. V takovém případě použij Button.
Pokud by význam ikonové varianty nebyl bez dalšího kontextu jasný. Použij textový popisek nebo Tooltip.

Ukázky

Základní varianta

Icon only varianta