Alert

Component preview opent in nieuw tabblad

Alerts geven contextuele feedback op acties van de gebruiker of tonen belangrijke informatie vanuit het systeem. Ze trekken de aandacht van de gebruiker zonder de taak van de gebruiker te onderbreken. Het is aan te raden om alerts bovenaan de gerelateerde sectie te laten zien. Zorg dat feedback als gevolg van een gebruikersactie altijd in beeld verschijnt.

Gebruikers kunnen alerts niet afwijzen. Alerts verdwijnen pas als de situatie is opgelost of de gebruiker een nieuwe actie uitvoert.

Technische opmerkingen

Gebaseerd op het Bootstrap Alerts component. Plaats de inhoud van .alert liefst in een .dso-rich-content. Plaats buttons in een <p> als ze nodig zijn. Zie component pagina.

Wanneer te gebruiken

Gebruik een alert om feedback te geven op acties van de gebruiker of om belangrijke systeeminformatie te laten zien. Ze worden ook samen gebruikt met inline validatie in lange formulieren.

Type meldingen:

  • Foutmelding: Foutmeldingen laten de gebruiker weten dat er iets is misgegaan nadat ze hebben geprobeerd iets te doen.
  • Waarschuwing: Waarschuwingen laten gebruikers weten dat ze acties ondernemen die niet wenselijk zijn of onverwachte resultaten kunnen hebben.
  • Bevestiging: Succesmeldingen laten de gebruiker weten dat ze een actie of taak hebben voltooid.
  • Toelichting: Toelichtingen geven aanvullende informatie die niet altijd is gekoppeld aan de huidige actie of taak.

Wanneer niet te gebruiken

Gebruik geen alert om invoervelden te valideren bij lange formulieren. Gebruik dan altijd in-line validatie op veldniveau. Zet het eventueel naast een alert met het overzicht van foutmeldingen bovenaan het formulier.

Gebruik ook geen alert voor destructieve acties. Zo kunt u bij een verwijderactie beter een blokkerend patroon gebruiken, zoals een modal. Zo kan de gebruiker bevestigen dat dit is wat hij wil.

Hoe te gebruiken

  • Houd meldingen zo kort mogelijk.
  • Wees beschrijvend en geef gebruikers duidelijke vervolgstappen.
  • Bedek andere inhoud niet met een alert.
  • De breedte van een alert varieert op basis van de context en pagina-indeling.
  • Plaats alerts bovenaan de gerelateerde sectie.
  • Zorg dat een alert altijd in beeld verschijnt.
  • Probeer dezelfde type meldingen te combineren.
  • Meerdere alerts worden verticaal gestapeld, met de nieuwste bovenaan de lijst.

Gedrag en toegankelijkheid

Een alert met ARIA role="alert" wordt onmiddellijk aangekondigd als het wordt toegevoegd aan de DOM . Een screenreader plaatst hier automatisch het woord β€˜melding’ voor.

Gebruik role="alert" alleen als de melding verschijnt als gevolg van een actie door de gebruiker.

Vraag jezelf altijd af wanneer de flow van de gebruiker moet worden onderbroken. Bijvoorbeeld als een toelichting of waarschuwingsalert vast op de pagina staat als die wordt geladen, is het niet nodig een role="alert" toe te kennen. In veel gevallen geldt: wees terughoudend met het gebruik van meldingen.

Meerdere alerts Het kan voorkomen dat er een alert op de pagina staat en er door een gebruikersactie nóg een alert bijkomt. Zorg er dan altijd voor dat de nieuwste alert een role="alert" krijgt en de overige alerts niet. Er mag dus slechts één alert een role="alert" bevatten.

Bronvermelding

<!-- Default -->
<dso-alert status="success">
    Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.
</dso-alert>
<!-- With Role Alert -->
<dso-alert status="success" role-alert>
    Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.
</dso-alert>
<!-- Danger -->
<dso-alert status="danger">
    Dit is een <a href="#">foutmelding</a>. Deze wordt getoond als er iets is misgegaan.
</dso-alert>
<!-- Warning -->
<dso-alert status="warning">
    Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.
</dso-alert>
<!-- Info -->
<dso-alert status="info">
    Dit is een informatiemelding. Deze wordt gebruikt voor <a href="#">aanvullende</a> informatie of tips.
</dso-alert>
<!-- Success Button -->
<dso-alert status="success">
    <div class="dso-rich-content">
        <p>Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.</p>
        <button type="button" class="btn">Button</button>
    </div>

</dso-alert>
<!-- Danger Button -->
<dso-alert status="danger">
    <div class="dso-rich-content">
        <p>Dit is een foutmelding. Deze wordt getoond als er iets is misgegaan.</p>
        <button type="button" class="btn">Button</button>
    </div>

</dso-alert>
<!-- Warning Button -->
<dso-alert status="warning">
    <div class="dso-rich-content">
        <p>Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.</p>
        <button type="button" class="btn">Zoekopdracht afbreken</button>
    </div>

</dso-alert>
<!-- Info Button -->
<dso-alert status="info">
    <div class="dso-rich-content">
        <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
        <button type="button" class="btn">Button</button>
    </div>

</dso-alert>
<!-- Alert With Headings -->
<dso-alert status="info">
    <div class="dso-rich-content">
        <h2>Dit is een H2</h2>
        <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
        <h3>Dit is een H3</h3>
        <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
        <h4>Dit is een H4</h4>
        <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
        <h5>Dit is een H5</h5>
        <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
        <h6>Dit is een H6</h6>
        <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    </div>

</dso-alert>
<!-- Default -->
<div class="alert alert-success">
  <span class="sr-only">Gelukt:</span> Dit is een succesmelding. Deze wordt getoond als een proces succesvol is
  afgerond.
</div>
<!-- With Role Alert -->
<div class="alert alert-success" role="alert">
  <span class="sr-only">Gelukt:</span> Dit is een succesmelding. Deze wordt getoond als een proces succesvol is
  afgerond.
</div>
<!-- Danger -->
<div class="alert alert-danger">
  <span class="sr-only">Fout:</span> Dit is een <a href="#">foutmelding</a>. Deze wordt getoond als er iets is
  misgegaan.
</div>
<!-- Warning -->
<div class="alert alert-warning">
  <span class="sr-only">Waarschuwing:</span> Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.
</div>
<!-- Info -->
<div class="alert alert-info">
  <span class="sr-only">Opmerking:</span> Dit is een informatiemelding. Deze wordt gebruikt voor
  <a href="#">aanvullende</a> informatie of tips.
</div>
<!-- Success Button -->
<div class="alert alert-success">
  <span class="sr-only">Gelukt:</span>
  <div class="dso-rich-content">
    <p>Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.</p>
    <button type="button" class="btn">Button</button>
  </div>
</div>
<!-- Danger Button -->
<div class="alert alert-danger">
  <span class="sr-only">Fout:</span>
  <div class="dso-rich-content">
    <p>Dit is een foutmelding. Deze wordt getoond als er iets is misgegaan.</p>
    <button type="button" class="btn">Button</button>
  </div>
</div>
<!-- Warning Button -->
<div class="alert alert-warning">
  <span class="sr-only">Waarschuwing:</span>
  <div class="dso-rich-content">
    <p>Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.</p>
    <button type="button" class="btn">Zoekopdracht afbreken</button>
  </div>
</div>
<!-- Info Button -->
<div class="alert alert-info">
  <span class="sr-only">Opmerking:</span>
  <div class="dso-rich-content">
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    <button type="button" class="btn">Button</button>
  </div>
</div>
<!-- Alert With Headings -->
<div class="alert alert-info">
  <span class="sr-only">Opmerking:</span>
  <div class="dso-rich-content">
    <h2>Dit is een H2</h2>
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    <h3>Dit is een H3</h3>
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    <h4>Dit is een H4</h4>
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    <h5>Dit is een H5</h5>
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    <h6>Dit is een H6</h6>
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
  </div>
</div>
<dso-alert status="{{ status }}" {{- attributes([roleAlert, 'role-alert']) }}>
  {{ message | safe }}
</dso-alert>
/* Default */
__title: success
status: success
message: >-
  Dit is een succesmelding. Deze wordt getoond als een proces succesvol is
  afgerond.
/* With Role Alert */
__title: met role alert
status: success
message: >-
  Dit is een succesmelding. Deze wordt getoond als een proces succesvol is
  afgerond.
roleAlert: true
/* Danger */
__title: danger
status: danger
message: >-
  Dit is een <a href="#">foutmelding</a>. Deze wordt getoond als er iets is
  misgegaan.
/* Warning */
__title: warning
status: warning
message: Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.
/* Info */
__title: info
status: info
message: >-
  Dit is een informatiemelding. Deze wordt gebruikt voor <a
  href="#">aanvullende</a> informatie of tips.
/* Success Button */
__title: success with button
status: success
message: |
  <div class="dso-rich-content">
    <p>Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.</p>
    <button type="button" class="btn">Button</button>
  </div>
/* Danger Button */
__title: danger with button
status: danger
message: |
  <div class="dso-rich-content">
    <p>Dit is een foutmelding. Deze wordt getoond als er iets is misgegaan.</p>
    <button type="button" class="btn">Button</button>
  </div>
/* Warning Button */
__title: warning with button
status: warning
message: |
  <div class="dso-rich-content">
    <p>Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.</p>
    <button type="button" class="btn">Zoekopdracht afbreken</button>
  </div>
/* Info Button */
__title: info with button
status: info
message: |
  <div class="dso-rich-content">
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    <button type="button" class="btn">Button</button>
  </div>
/* Alert With Headings */
__title: alert with headings
status: info
message: |
  <div class="dso-rich-content">
    <h2>Dit is een H2</h2>
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    <h3>Dit is een H3</h3>
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    <h4>Dit is een H4</h4>
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    <h5>Dit is een H5</h5>
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    <h6>Dit is een H6</h6>
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
  </div>