Toast

Notifiering, notiser

Storybook

React Aria

Komponent för att visa ett kort, tillfälligt meddelande om åtgärder, fel eller andra händelser i en applikation.

Toast har fyra varianter: success, info, important och warning.

Typ

SuccessInfoImportantWarning

Timeout (ms)

Ingen5000700010000

Meddelande

import { GlobalToastRegion, toastQueue, Button } from '@midas-ds/components'

<GlobalToastRegion />

<Button
  onPress={() =>
    toastQueue.add(
    { type: 'success', message: 'Allt funkar som det ska!' },
    { timeout: 5000 }
  )}
>
  Visa toast
</Button>

Implementationer

Lokalt

Använd ToastProvider för att sätta en kö av toasts på valfritt ställe i en app. Om det inte går att wrappa hela appen i en kö med en provider, använd den globala varianten.

<ToastProvider>
  {state => (
    <Button onPress={() => state.add({ message: 'Allt funkar som det ska!', type: 'success' }, { timeout: 5000 })}>
      Tryck här för en notifiering
    </Button>
  )}
</ToastProvider>

Globalt

Välj en global kö för toasts om det passar ditt användningsscenario bättre. Lägg en <GlobalToastRegion> någonstans i appen och lägg nya toasts i kön enligt:

import { GlobalToastRegion, toastQueue } from '@midas-ds/components'

<GlobalToastRegion />
//...
<Button onPress={
  () => toastQueue.add({type: 'success', message: 'Toasten är klar'}, {timeout: 5000})
}>Visa notis</Button>

Toastkö

Om det triggas flera toasts sätts de i en kö för att visas i turordning. Maximala antalet som visas samtidigt är 5.

Programmatisk stängning

.add() returnerar en nyckel som kan användas för att stänga en toast programmatiskt med .close(). Callbacken onClose kan användas för att reagera när en toast stängs, oavsett om det sker manuellt eller via timeout.

const key = toastQueue.add(
  { type: 'info', message: 'Bearbetar...' }
)

// Stäng toasten programmatiskt
toastQueue.close(key)

toastQueue.add(
  { type: 'success', message: 'Filen sparades' },
  {
    timeout: 5000,
    onClose: () => console.log('Toasten stängdes'),
  }
)

Tillgänglighet

Toast-regionen renderas som ett landmärke (role="region") som kan nås med tangentbordet via F6 (framåt) och Shift+F6 (bakåt). Det gör att användare med hjälpmedel snabbt kan navigera till aktiva toasts utan att behöva tabba genom hela sidan.

När toast-regionen får fokus pausas alla nedräkningstimer automatiskt, så att användaren hinner läsa innehållet. Timern återupptas när fokus lämnar regionen.

Automatisk stängning

Använd automatisk stängning med timeout enbart för icke-kritiska meddelanden. Vissa användare kan behöva extra tid att läsa innehållet, och användare med skärmförstoring kan missa toasts helt. Timeout ska vara minst 5000 ms.

API

Toast

Name	Type	Default	Description
state *	ToastState<T>	-
toast *	QueuedToast<T>	-	The toast object.
className	string	-

ToastRegion

GlobalToastRegion

ToastProvider