Toaster

En toaster är ett kort och inte så 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

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

HTML
<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">
            <button class="c-btn--medium c-btn--dark" tabindex="0">Stäng</button>
        </div>
    </div>
</div>

Senast publicerad

Sidansvarig för sidan är Styleguide