A badge bizonyos elemek vagy funkciók állapotáról ad visszajelzést.
Fejlesztői dokumentáció
Label: A badge szöveges tartalma.
Background: A komponens háttere és befoglaló eleme.
A badge két méretben – small és large – használható.
A méretet a rendelkezésre álló hely és a felhasználói felület kontextusának megfelelően kell kiválasztani.
A badge a neutral, a brand és a semantic színpaletta színeit tudja felvenni.
Ha a badge-et kategorizálásra használjuk és 6-nál több kategóriánk van, kizárólag a neutral vagy a brand színváltozatot használjuk.
Opcionálisan ikonnal is használható, de csak ikonnal nem.
A badge szöveges tartalma kijelölhető.
A badge a szélessége automatikusan felveszi a benne levő tartalom szélességét.
Legyen minél tömörebb, lehetőleg 1-2 szó. Egyetlen tulajdonságot vagy jellemzőt írjon le.
A badge általában egy szett része. Legalább a szetten belül ügyelni kell az egységes fogalmazásra.
-
Nagy kezdőbetűvel kezdjük. Ügyelünk rá, hogy csak az első szó kezdőbetűje nagy!
-
Nem használunk mondatvégi írásjelet.
Ügyeljünk rá, hogy a színeket a szemantikus jelentésüknek megfelelően használjuk. Ha a badge jelentése neutrális, a neutral vagy a brand variánst használjuk.
A badge-ek kiemelik az információkat, ezért csak indokolt esetben használjuk őket.
Badge helyett inkább szöveget használunk a kevésbé fontos információknál, illetve ha nincs szükség a felhasználó beavatkozására. Ezzel csökkenthetjük a felhasználók kognitív terhelését.
A komponens a design system kontrasztcélokkal generált szemantikus színeit használja, ezért megfelel az akadálymentesítési követelményeknek. A tokenizálás miatt ez színsémától és sötét vagy világos módtól függetlenül igaz.
A kontraszt minimumokat a design system legsötétebb – sötét módban a legvilágosabb – hátterén generáljuk, ezért ez az arány minden más használható háttéren ennél csak jobb lehet.
Ha a komponenst nem tokenizált háttérszínen használjuk, manuálisan ellenőrizni kell a kontrasztot!
A komponens állapotai és kiegészítő elemei nem kizárólag színnel közölnek információt, mivel a badge mindig tartalmaz szöveget is.
Így a színtévesztő vagy színvak, illetve a monokróm kijelzőt használó felhasználók is megkapják a szükséges információt.
Az ikonokat alapértelmezetten elrejtjük az asszisztív technológiák elől, hiszen ezek a szöveges jelentés megerősítésére szolgálnak.
