System
Menu

Componenten / Basis / Status

Badge

Korte status of categorie. Zacht, gevuld of omlijnd, met optionele stip.

BasisStatus4 instellingenbadge

Voorbeeld

Instellingen

Laden…

<span class="gx-badge gx-badge--neutral gx-badge--soft">
  <i aria-hidden="true"></i>
  Binnenkort online</span>

Instellingen

Alles wat je kunt variëren. Ook als query in de URL en als options in de MCP-tool get_component.

SleutelInstellingWaardenStandaard
toneToonneutral accent success warning danger infoneutral
styleStijlsoft solid outlinesoft
dotStipaan / uittrue
labelTeksttekstBinnenkort online

Richtlijnen

Toegankelijkheid

  • Kleur is nooit de enige drager van betekenis: de tekst zegt het ook.

Wel

  • Eén of twee woorden.

Niet

  • Badges als knop gebruiken.

Verwant

TooltipKorte uitleg bij hover en focus. Alleen aanvullend: de info staat ook elders of is niet essentieel.
LadenLaadindicator als ring, stippen of de GXJ-golflijn. Stopt bij reduced motion.
MeldingMededeling in de pagina: info, gelukt, waarschuwing of fout. Optioneel weg te klikken.
ToastKorte bevestiging na een handeling, verdwijnt na 4 seconden. Via de runtime: gx.toast('Tekst').