Ga naar hoofdinhoud

Dialog

Voorbeeld HTML
<div class="rvo-dialog__background">
  <dialog
    class="rvo-dialog rvo-dialog--wit rvo-dialog--centered-dialog rvo-dialog--centered-dialog--md"
    aria-expanded="true"
    aria-label="Dialog aria label"
  >
    <span
      class="utrecht-icon rvo-icon rvo-icon-kruis rvo-icon--md rvo-icon--hemelblauw rvo-dialog__close-icon"
      role="img"
      aria-label="Kruis"
    ></span>
    <div class="rvo-dialog__content"></div>
  </dialog>
</div>
Open in nieuwe tab

Dialog

Een dialoog verschijnt over de hoofd content van de pagina heen. Het doel is om de interactie met de gebruiker van de hoofd content te verplaatsen naar de dialoog. De hoofd content is slechts nog deels zichtbaar.Een dialog kan een modal zijn. In dat geval is interactie uitsluitend mogelijk in de dialoo.

Wanneer gebruik je het component​

Dialogs zijn bedoeld voor situaties waarin de normale taakuitvoering van de gebruiker moet worden onderbroken om de aandacht op een belangrijke waarschuwing of keuze te richten zoals het verwijderen van belangrijke gegevens.

Anatomie van het component​

Een dialog bestaat uit:

  • Een venster met daarin content die de aandacht van de gebruiker vereist
  • Een knop om de dialoog te sluiten
  • Bij gebruik van de modal optie: Een achtergrondlaag die interactie met de hoofd content niet mogelijk maakt

Richtlijnen​

  • Gebruik een dialoog als de gebruiker alleen verder kan als de taak binnen het dialoog uitgevoerd is. Bijvoorbeeld inloggen voordat de gebruiker een bepaald onderdeel van de applicatie kan bekijken.
  • Gebruik geen dialoog voor optionele informatie zoals instructies bij het invoeren van formuliervelden.

Rijkshuisstijl​

Vanuit de Rijkshuisstijl zijn er geen richtlijnen wat betreft dialogen.

Bronnen​