Componenten / Uitgebreid / Status

Melding

Mededeling in de pagina: info, gelukt, waarschuwing of fout. Optioneel weg te klikken.

UitgebreidStatus3 instellingenalert

Voorbeeld

Instellingen

Laden…

<div class="gx-alert gx-alert--info" role="status">
  <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-10v6m0-9.5v.5"/>
  </svg>
  <div>
    <p class="gx-alert__title">Goed om te weten</p>
    <p>
      De site staat achter een previewlink tot de lancering.</p>
  </div>
  <button class="gx-btn gx-btn--ghost gx-btn--icon gx-btn--sm" type="button" data-gx="dismiss" aria-label="Melding sluiten">
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M6 6l12 12M18 6 6 18"/>
    </svg>
  </button>
</div>

Instellingen

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

Sleutel	Instelling	Waarden	Standaard
`tone`	Toon	`info` `success` `warning` `danger`	`info`
`dismissible`	Wegklikbaar	aan / uit	`true`
`title`	Met titel	aan / uit	`true`

Richtlijnen

Toegankelijkheid

role=alert alleen voor fouten, anders role=status.

Wel

Zeg wat er moet gebeuren.

Niet

Meldingen die zichzelf verbergen terwijl ze belangrijk zijn.

Verwant

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

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.

ToastKorte bevestiging na een handeling, verdwijnt na 4 seconden. Via de runtime: gx.toast('Tekst').