Toaster

En toaster är ett kort mindre viktigt meddelande som stängs automatiskt efter en kort stund.

Design och språk

En toaster ska

  • placeras ovanpå informationen på sidan
  • innehålla max två åtgärder
  • innehålla åtgärden stäng

Om användaren inte stänger toastern försvinner den efter ett fåtal sekunder men stannar kvar om användaren hovrar över den.

Texten i toastern

Eftersom toastern visas en väldigt kort stund måste texten vara kort och tydlig.

När du ska använda toaster

När du vill ge användaren en bekräftelse på att något har hänt. Användaren ska inte behöva läsa innehållet i toastern för att kunna använda systemet.

Komponent och kod

<div class="c-toaster" role="alert">
    <div class="c-toaster__content">
        <p><strong>Kontrollresultat är sparat.</strong> Här kan du lägga till ytterligare text.</p>
        <div class="c-toaster__actionlink-container">
            <a href="http://www.google.com" class="c-toaster__actionlink c-link__light--icon-right">Extern länk<span class="sjv-i-extern-lank"></span></a>
            <button class="c-toaster__actionlink" tabindex="0">Stäng</button>
        </div>
    </div>
</div>

Senast publicerad 2020-03-25

Sidansvarig för sidan är Styleguide