Az interakciós állapotok az interaktív elemek státuszát kommunikálják, illetve azt, hogy milyen műveletet lehet vagy nem lehet végrehajtani velük. Az állapotjelölők célja az információk átadása, és nem a dekoráció. Kerüljük az összetett átmeneteket és animációkat, hogy csökkentsük a vizuális zajt és diszrupciót.
Konzisztens vizuális megjelenéssel könnyebben tanulható a felhasználói felület. Ha kiszámítható a megjelenés és a működés, a felhasználók hatékonyabban tudják használni a felületeket. Ez az interakciós állapotjelzőkre is igaz.
Bár a különböző eszközök különböző interakciós módokra képesek, az alapvető interakciókat érdemes minden eszközön kezelni.
Ha a billentyűzet fókusz állapotát nem implementáljuk mobileszközökre, akkor azok a felhasználók, akik billentyűzettel vagy billentyűzetet szimuláló switch eszközzel használják a mobiltelefonjukat nem fogják tudni használni a szolgáltatást.
Azok felhasználói élménye is sérülhet, akik hibrid eszközt – érintőképernyős laptopot, billentyűzetbe dokkolt tabletet – használnak.
A design system minden sztenderd állapotot implementál, és egységes logika alapján építi fel őket.
Akkor jelenik meg, ha a felhasználó az interaktív elem fölé viszi a kurzorját. Ez az állapot mindig sötétebb – dark mode-ban világosabb –, így megfelel a kontraszttal kapcsolatos követelményeknek.
Akkor jelenik meg, ha a felhasználó a billentyűzetével az interaktív elemhez navigál. Általában 2px vastag, brand színű és 2px vastag fehér körvonal jelöli.
Akkor jelenik meg, ha az interaktív elem épp kattintás alatt van. Mindig sötétebb a hover állapotnál, így ennek a kontrasztja is megfelelő. Bizonyos esetekben a komponens pozíciója 1px-el lejjebb kerül.
Radio buttonöknél, checkboxoknál és hasonló elemeknél értelmezhető. Ikon- és színváltozás jelöli.
A legtöbb interaktív elem az elsődleges vagy brand színt használja. Kivételt képeznek azok az elemek vagy variánsok, amelyek kifejezetten a vizuális prominencia csökkentésére készülnek.
A függőben lévő vagy betöltés alatti állapotot – ha 1 másodpercnél tovább tart – körkörös animáció jelzi.
A sikeres vagy helyes állapot a legtöbb esetben zöld színt és szemantikai jelentést támogató ikont kap.
A sikertelen vagy hibás állapot a legtöbb esetben piros színt és szemantikai jelentést támogató ikont kap.
Az inaktív vagy disabled állapot szürkét és halványabb szövegszínt használ. A szöveg nem kijelölhető, az interaktív elem nem aktiválható vagy fókuszálható.
Gomboknál a csak vizuálisan inaktív állapot is értelmezhető. Ilyenkor az interaktív elem aktiválható, illetve hibaüzenetben megmagyarázzuk, hogy miért inaktív az gomb.
A csak olvasható vagy read-only állapot szürkét és halványabb szövegszínt használ. A szöveg kijelölhető.
