Bekräftameddelande

Bekräftameddelande, det vill säga confirm, använder du för att ge användaren en möjlighet att bekräfta att hen vill fortsätta genomföra en åtgärd som inte går att ångra.

Design och språk

Ett meddelande som används för att användaren ska bekräfta en åtgärd ska:

  • placeras ovanpå informationen på sidan
  • innehålla en säkerhetsfråga som användaren måste svara på för att bekräfta en vald aktivitet
  • stoppa ett pågående flöde
  • stoppa huvudflödet tills dess att användaren bekräftat eller avbrutit meddelandet.

När användaren avbrutit meddelandet ska användaren hamna på samma plats som den befann sig på tidigare.

Texten i bekräftameddelandet

Texten i meddelandet ska vara kort men innehålla all den information som användaren behöver för att kunna förstå vad den ska bekräfta.

När du ska använda ett bekräftameddelande

Använd ett bekräftameddelande när du vill informera användaren om att den är på att göra något som är kritiskt eller inte går att ångra. Det kan till exempel vara när användaren är på väg att radera något, avbryta utan att ha sparat eller starta en körning som tar långt tid.

När du inte ska använda ett bekräftelsemeddelande

Använd inte ett bekräftelsemeddelande för att visa att något har gått bra eller för att informera om något.

Alternativa komponenter

Tillgänglighet

För att göra ett bekräftameddelande tillgängligt ska

  • fokus bytas till dialog när meddelandet öppnas
  • tabbordningen stanna i meddelandet till dess att det stängs
  • knappar som triggar att meddelandet visas ska ha attributet aria-haspopup="dialog".

Komponent och kod

Du ska oftast använda komponenten i storleken small.

Här kan du se exempel på ett bekräftelsemeddelandelänk till annan webbplats.

Parametrar på bekräftameddelande

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

contentRef

content-ref

Referens till innehållet i modalens "body".

string

-

footerRef

footer-ref

Referens till modalens sidfot.

string

-

heading

heading

Titlen på modalen.

string

-

open

open

Ska modalen öppnas eller stängas?

boolean

false

size

size

Storleken på modalen, tillgängliga storlekar är large, medium och small.

string

'large'

Event på bekräftameddelande

Event

Beskrivning

Type

openChange

Change event som triggas när open ändras.

CustomEvent<boolean>

jvAlertModalOpen

Öppnar modalen kan skickas på komponenten eller på document objektet

CustomEvent<boolean>

jvAlertModalClose

Stänger modalen kan skickas på komponenten eller på document objektet

CustomEvent<boolean>

jvAlertModalToggle

Togglar modalen kan skickas på komponenten eller på document objektet

CustomEvent<boolean>

Large

Vill du radera?

<!-- Button that open modal -->
<button class="c-btn--medium" aria-haspopup="modal" onclick="document.querySelector('jv-alert-modal').dispatchEvent(new Event('jvAlertModalOpen'))">Öppna modalt fönster</button>
<!-- ---------------------- -->

<jv-alert-modal heading="Alla dina redigeringar kommer att raderas." content-ref="content" footer-ref="footer">
  <p slot="content"> Vill du radera? </p>
  <button slot="footer" onclick="document.querySelector('jv-alert-modal').dispatchEvent(new Event('jvAlertModalClose'))" class="c-btn--medium">Radera</button>
  <button slot="footer" autofocus="" onclick="document.querySelector('jv-alert-modal').dispatchEvent(new Event('jvAlertModalClose'))" class="c-primary-btn--medium">Avbryt</button>
</jv-alert-modal>

Medium

<jv-alert-modal size="medium" heading="Alla dina redigeringar kommer att raderas." content-ref="content" footer-ref="footer">
  <p slot="content"> Vill du radera? </p>
  <button slot="footer" onclick="document.querySelector('jv-alert-modal').dispatchEvent(new Event('jvAlertModalClose'))" class="c-btn--medium">Radera</button>
  <button slot="footer" autofocus="" onclick="document.querySelector('jv-alert-modal').dispatchEvent(new Event('jvAlertModalClose'))" class="c-primary-btn--medium">Avbryt</button>
</jv-alert-modal>

Small

<jv-alert-modal size="small" heading="Alla dina redigeringar kommer att raderas." content-ref="content"footer-ref="footer">
   <p slot="content"> Vill du radera? </p>
   <button slot="footer" onclick="document.querySelector('jv-alert-modal').dispatchEvent(new Event('jvAlertModalClose'))"
           class="c-btn--medium">Radera</button>
   <button slot="footer" autofocus onclick="document.querySelector('jv-alert-modal').dispatchEvent(new Event('jvAlertModalClose'))" class="c-primary-btn--medium">Avbryt</button>
</jv-alert-modal>

Äldre version av bekräftameddelande

Senast publicerad

Sidansvarig för sidan är Styleguide