Styleguide

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 att genomföra en åtgärd som inte går att ångra.

Design och språk

Meddelandet 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å väg 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äftameddelande

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

Komponenten driftsattes första gången i version 12.2.1.

Du ska oftast använda komponenten i storleken small.

Här kan du se exempel på ett bekräftameddelande Lä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

-

extraClass

extra-class

Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"

string


footerRef

footer-ref

Referens till modalens sidfot.

string

-

heading

heading

Titlen på modalen.

string

-

headingRef

heading-ref

Referens till huvudet i modalens sidhuvud. OBS. överskider det som anges i heading.

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'

dataAutofocus

data-autofocus

Element med detta attribut hamnar i fokus när modalen

öppnas.

-

-


Listener på bekräftameddelande

Event

Beskrivning

Typ

jvAlertOpenChange

Triggas när open-attributet ändras. Du hittar ändrade värdet i "event.detail".

CustomEvent<boolean>


Event på bekräftameddelande

Event

Beskrivning

Typ

jvAlertModalOpen

Öppnar meddelandet

CustomEvent<boolean>

jvAlertModalClose

Stänger meddelandet

CustomEvent<boolean>

jvAlertModalToggle

Togglar meddelandet

CustomEvent<boolean>

Large

Vill du radera?

HTML 
<!-- Button that open modal -->
<button type="button" class="c-btn c-btn--medium" aria-haspopup="modal" onclick="document.getElementById('alert-modal-large').dispatchEvent(new Event('jvAlertModalOpen'))">
   Large bekräftameddelande
</button>
<!-- ---------------------- -->

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

Medium

Vill du radera?

HTML 
<!-- Button that open modal -->
<button type="button" class="c-btn c-btn--compact" aria-haspopup="modal" onclick="document.getElementById('alert-modal-medium').dispatchEvent(new Event('jvAlertModalOpen'))">
   Medium bekräftameddelande
</button>
<!-- ---------------------- -->

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

Small

Vill du radera?

HTML 
<!-- Button that open modal -->
<button type="button" class="c-btn c-btn--small" aria-haspopup="modal" onclick="document.getElementById('alert-modal-small').dispatchEvent(new Event('jvAlertModalOpen'))">
   Small bekräftameddelande
</button>
<!-- ---------------------- -->

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

Bekräftameddelande med eget huvud

Alla dina redigeringar kommer att raderas.

Vill du radera?

HTML 
<!-- Button that open modal -->
<button type="button" class="c-btn c-btn--medium" aria-haspopup="modal" onclick="document.getElementById('alert-modal-header').dispatchEvent(new Event('jvAlertModalOpen'))">
   Small bekräftameddelande
</button>
<!-- ---------------------- -->

<jv-alert-modal id="alert-modal-header" content-ref="content" heading-ref="header" footer-ref="footer" heading="Alla dina redigeringar kommer att raderas.">
  <h1 class="modalHeadlineText" slot="header">
    <span class="sjv-i-varning"></span>
    Alla dina redigeringar kommer att raderas.
  </h1>
  <p slot="content"> Vill du radera? </p>
  <button type="button" class="c-btn c-btn--medium" onclick="document.querySelector('#alert-modal-header').dispatchEvent(new Event('jvAlertModalClose'))" slot="footer">Radera
  </button>
  <button data-autofocus="" type="button" class="c-btn c-btn--medium" onclick="document.querySelector('#alert-modal-header').dispatchEvent(new Event('jvAlertModalClose'))" slot="footer">Avbryt
  </button>
</jv-alert-modal>

Senast publicerad

Sidansvarig för sidan är Styleguide