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..
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 |
dataAutofocus | data-autofocus | Element med detta attribut hamnar i fokus när modalen öppnas. | - | - |
Event | Beskrivning | Typ |
|---|---|---|
jvModalOpenChange | Triggas när open-attributet ändras. Du hittar ändrade värdet i "event.detail". | CustomEvent<boolean> |
Event | Beskrivning | Typ |
|---|---|---|
jvModalOpen | Öppnar meddelandet | CustomEvent<boolean> |
jvModalClose | Stänger meddelandet | CustomEvent<boolean> |
jvModalToggle | Togglar meddelandet | CustomEvent<boolean> |
Bekräftameddelande
Alla dina redigeringar kommer att raderas.
Vill du radera?
<button class="c-btn" onclick="document.getElementById(23467).dispatchEvent(new Event('jvModalOpen'))">Visa meddelande</button>
<!-- Här börjar komponenten -->
<jv-modal id="23467" open="false" heading-ref="header"
content-ref="content" footer-ref="footer" extra-class="">
<h2 slot="header">
<span class="sjv-i-varning" style="color: #965b1d;"></span>
Alla dina redigeringar kommer att raderas.
</h2>
<p slot="content"> Vill du radera? </p>
<button slot="footer" onclick="document.dispatchEvent(new Event('jvModalClose'))" class="c-btn">Radera</button>
<button slot="footer" data-testid="avbrytBtn" onclick="document.dispatchEvent(new Event('jvModalClose'))" class="c-btn" data-autofocus="true">Avbryt</button>
</jv-modal>Senast publicerad
Sidansvarig för sidan är Styleguide