A button olyan interaktív elem, amellyel műveleteket lehet végrehajtani.
Tartalmazhat labelt (szöveget), ikont vagy labelt és ikont.
Ha labelt és ikont is tartalmaz, az ikon vagy a label előtt vagy a label után helyezkedhet el, egyszerre mindkét helyen nem.
A design system három gombtípust tartalmaz.
A primary button a felületen lévő legfontosabb akció kiemelésére használható. Ezt használjuk az űrlap lépéseinek beküldésére és a teljes űrlap beküldésére is.
- Egy felület vagy szekció csak egy primary buttont tartalmazhat. (Modális ablakok vagy egyéb, kontextuálisan megjelenő elemek tartalmazhatnak újabb primary buttont is.)
- Nem minden felületen van szükség primary buttonra.
A secondary és a subtle button vizuálisan kevésbé hangsúlyos. Ezekből egy felületen vagy szekcióban több is használható.
Small, medium és large méretben használható. A térközök miatt a small méret is kényelmesen használható érintőképernyőkön.
Az interakciós állapotok a design system sztenderd logikáját követik.
A destructive (negatív) button a komoly következményekkel járó, gyakran visszavonhatatlan akciók megkülönböztetésére használható. Destructive buttonra csak ritkán van szükség, túl gyakran használva elveszíti a jelentőségét.
Jó gyakorlat, ha ezeket az akciókat egy tájékoztató lépés előzi meg, és a destructive button már a végleges megerősítést jelenti.
Minden variáns rendelkezik loading (töltő) állapottal. Loading állapotban a label és az ikon helyett egy loading spinner jelenik meg. A komponens ilyenkor is megtartja az eredeti szélességét.
Alapesetben a loading állapot 1 másodperces késleltetés után jelenik meg, hogy ne tapasztaljanak zavaró, villogó animációt a felhasználók.
A disabled állapotú button inaktív akciók jelzésére használható. Használata körültekintést igényel, mert összezavarhatja a felhasználókat.
Alapesetben a disabled állapotú button is fókuszálható és aktiválható, hogy tájékoztatni tudjuk a felhasználókat arról, miért nem érhető el az akció. (További részletek az akadálymentesítés fejezetben.)
Alapesetben a button automatikusan méreteződik a tartalom mennyiségének megfelelően.
A buttonnak van minimális szélességge. A minimális szélesség az esztétikus arányokat és a megfelelő nagyságú interaktív területet biztosítja.
A button labele általában csak 1-2 szó. Ha mégis hosszabb szövegre van szükség, több sorba törik a label.
A teljes szélességű variáns kitölti a befoglaló elemet. Ez a variáns leginkább mobilfelületeken használható, és egyszerűbben és kényelmesebben koppintható.
- A csak ikont tartalmazó buttont alt texttel is el kell látni, hogy az asszisztív technológiák számára is értelmezhető legyen. Az alt textnek az akciót kell leírnia, és nem azt, hogy mi látható az ikonon.
- Csak ikont tartalmazó buttont csak indokolt esetekben használunk, mivel kevés univerzális, mindenki számára ismert ikon létezik.
- A labelt és ikont is tartalmazó gomb ikonja dekoratív. El kell rejteni az asszisztív technológiák elől, hogy a képernyőolvasó szoftverek ne ismételjék el kétszer ugyanazt.
- Ha egy felület több ugyanolyan buttont tartalmaz, érdemes egyedivé tenni a gomb labelét a képernyőolvasó szoftverek számára. Például ha egy táblázat minden sorához tartozik Részletek button, a labelt kiegészíthetjük a sor azonosítójával (Részletek: Sor azonosítója).
- Ügyelni kell rá, hogy a vizuálisan megjelenő szöveg és az asszisztív technológiák számára elérhető szöveg eleje megegyezzen. Ellenkező esetben azok, akik szövegfelismerővel navigálnak nem fognak tudni hivatkozni a gombra.
- Bár a subtle button és a link hasonlónak tűnik, fontos, hogy a kódban szemantikailag helyesen használjuk őket. A button akciót hajt végre, a link navigál. Ezeket az elemeket az asszisztív technológiák is máshogy kezelik, ezért a helytelen használat ronthatja a felhasználói élményt.
- Kerülni kell a programatikusan disabled button használatát, különösen az űrlapokon. Ezek a gombok nem fókuszálhatóak, ezért bizonyos asszisztív technológiák számára nem fedezhetőek fel.
- A disabled button kontrasztja alacsony, ami csökkenti az olvashatóságot. Ha a felhasználó mégis megpróbál aktiválni egy disabled buttont, alapesetben nem kap visszajelzést arról, hogy miért nem aktiválható a gomb.
A button szövege legyen minél tömörebb, lehetőleg 1-2 szó.
Derüljön ki, hogy mi lesz a következménye a gomb megnyomásának. Kerüljük a túl általános gombokat (Tovább), ha konkrétabban is meg lehet fogalmazni egy művelet következményét (Küldés).
Fontos, hogy ugyanaz gomb mindenhol ugyanazt a műveletet jelentse, és ugyanarra a műveletre mindig ugyanazt a gombot használjuk.
Legyen összhangban a szövegkörnyezettel, működjön együtt a felület többi elemével, reagáljon a címsorra.
A gombnak tükröznie kell a felhasználó által végrehajtott műveletet, ezért lehetőleg igéket vagy igékből képzett főneveket használunk (Küldés, Mentés, Letöltés, stb.).
- Nagy kezdőbetűvel kezdjük. Ügyelünk rá, hogy csak az első szó kezdőbetűje nagy!
- Általában nem használunk mondatvégi írásjelet.