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.
Kontrollresultat är sparat. Här kan du lägga till ytterligare text.
<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 type="button" class="c-btn c-btn--medium c-btn--dark">Stäng</button>
</div>
</div>
</div>Senast publicerad
Sidansvarig för sidan är Styleguide