Gå til sidens indhold
Det Fælles Designsystem

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Toastbesked

Åbn dette eksempel i et nyt vindue: toastbesked-info
Eksempel på toastbesked komponent

Information: Du har fået en besked

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Eksempler og retningslinjer

Installation

HTML Struktur

Kodeeksempel
<div class="toast toast-info show" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p><span class="sr-only">Information:
            </span><strong id="notification-info-heading">Du har fået en besked</strong></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium.</p>
        <button class="toast-close" aria-describedby="notification-info-heading">Luk</button>
    </div>
</div>

Kopiér ovenstående kode for at indsætte én toastbesked.

Bemærk at ovenstående har class show som default. Der følger en animation med når en toastbesked vises, som kommer ved at man ændrer klasserne i følgende flow:

  1. hide
  2. showing
  3. show

Ved at bruge nedenstående javascript vil dette komme ud af boksen. Men bemærk at en toastbesked bør have class hide fra start.

Placering

Toastbeskeder placeres i en div med class toast-container og attributter aria-live="assertive", aria-atomic="false" og aria-relevant="additions". Denne div placeres som første element i <main>.

<main id="main-content">
    <div class="toast-container" aria-live="assertive" aria-atomic="false" aria-relevant="additions">
        <!-- Placer toastbeskeder her -->
    </div>
    ...
</main>

Se fungerende eksempel på implementering af toastbesked i et nyt vindue

Javascript

Der medfølger Javascript til komponenten, som man kan vælge at bruge.

Vis

Når en toastbesked vises, ændres class fra hide til showing og til sidst show.

let toast = new DKFDS.Toast(document.getElementById('TOAST-ID'));
toast.show();

Skjul

Når en toastbesked skjules, ændres class fra show til hide.

let toast = new DKFDS.Toast(document.getElementById('TOAST-ID'));
toast.hide();

Varianter

Succes

Vis dette eksempel i et nyt vindue: toastbesked-success
Kodeeksempel
<div class="toast toast-success show" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p><span class="sr-only">Succes:
            </span><strong id="notification-success-heading">Din ansøgning er afsendt</strong>
        </p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium.</p>
        <button class="toast-close"
            aria-describedby="notification-success-heading">Luk</button>
    </div>
</div>

Advarsel

Vis dette eksempel i et nyt vindue: toastbesked-warning
Kodeeksempel
<div class="toast toast-warning show" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p><span class="sr-only">Advarsel:
            </span><strong id="notification-warning-heading">Dette er en advarsel</strong></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium.</p>
        <button class="toast-close"
            aria-describedby="notification-warning-heading">Luk</button>
    </div>
</div>

Fejl

Vis dette eksempel i et nyt vindue: toastbesked-error
Kodeeksempel
<div class="toast toast-error show" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p><span class="sr-only">Fejl:
            </span><strong id="notification-error-heading">Der opstod en fejl</strong></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium.</p>
        <button class="toast-close" aria-describedby="notification-error-heading">Luk</button>
    </div>
</div>

Information

Vis dette eksempel i et nyt vindue: toastbesked-info
Kodeeksempel
<div class="toast toast-info show" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p><span class="sr-only">Information:
            </span><strong id="notification-info-heading">Du har fået en besked</strong></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium.</p>
        <button class="toast-close" aria-describedby="notification-info-heading">Luk</button>
    </div>
</div>