Stabil

Toast

Toast viser korte, flyktige meldinger til brukeren — for eksempel bekreftelser, advarsler eller feilmeldinger. Bygget på Radix UI Toast med sveip-for-å-lukke og full tastaturnavigasjon.

Den anbefalte måten å bruke toasts på er det imperative API-et: plasser <Toaster /> én gang i rot-layouten, og kall toast() hvor som helst i appen. Lavnivå-komponentene (ToastProvider, Toast osv.) er fortsatt tilgjengelige hvis du trenger full kontroll.

Importering

// Anbefalt
import { Toaster, toast, useToast, dismissToast } from "@kilden/designsystem";
 
// Lavnivå-komponenter
import {
  ToastProvider,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastAction,
  ToastClose,
  ToastViewport,
} from "@kilden/designsystem";

Med Toaster og toast()

Plasser <Toaster /> én gang, typisk nederst i rot-layouten:

export default function RootLayout({ children }) {
  return (
    <body>
      {children}
      <Toaster />
    </body>
  );
}

Vis deretter varsler med toast():

function ToasterDemo() {
return (
  <>
    <div style={{ display: "flex", gap: "0.5rem" }}>
      <Button onClick={() => toast({ title: "Lagret!", description: "Endringene dine er lagret." })}>
        Vis toast
      </Button>
      <Button
        variant="secondary"
        onClick={() => toast({ variant: "danger", title: "Noe gikk galt", description: "Prøv igjen senere." })}
      >
        Vis feil
      </Button>
    </div>
    <Toaster />
  </>
);
}
render(<ToasterDemo />);

Plassering

Bruk position på Toaster for å velge hjørne. Standard er "top-right". På mobil går toasts over hele bredden, og position styrer bare om de ligger øverst eller nederst.

<Toaster position="top-right" />

toast() returnerer et håndtak med id, dismiss() og update():

const handle = toast({ title: "Laster opp..." });
// ...
handle.update({ title: "Ferdig!", variant: "success" });

Bruk useToast() i komponenter for å lese aktive toasts, eller dismissToast() for å lukke én (med id) eller alle toasts.

Lavnivå-komponenter

Wrap applikasjonen din med ToastProvider og plasser ToastViewport nederst. Bruk open-prop for å kontrollere synlighet.

function ToastDemo() {
const [open, setOpen] = React.useState(false);
return (
  <ToastProvider>
    <Button onClick={() => setOpen(true)}>Vis toast</Button>
    <Toast open={open} onOpenChange={setOpen}>
      <div style={{ display: "grid", gap: "0.25rem" }}>
        <ToastTitle>Lagret!</ToastTitle>
        <ToastDescription>Endringene dine er lagret.</ToastDescription>
      </div>
    </Toast>
    <ToastViewport />
  </ToastProvider>
);
}
render(<ToastDemo />);

Med handling

function ToastActionDemo() {
const [open, setOpen] = React.useState(false);
return (
  <ToastProvider>
    <Button onClick={() => setOpen(true)}>Send melding</Button>
    <Toast open={open} onOpenChange={setOpen}>
      <div style={{ display: "grid", gap: "0.25rem" }}>
        <ToastTitle>Melding sendt</ToastTitle>
        <ToastDescription>Meldingen ble sendt til mottakeren.</ToastDescription>
      </div>
      <ToastAction altText="Angre sending">Angre</ToastAction>
    </Toast>
    <ToastViewport />
  </ToastProvider>
);
}
render(<ToastActionDemo />);

Feil-variant

function ToastDangerDemo() {
const [open, setOpen] = React.useState(false);
return (
  <ToastProvider>
    <Button variant="destructive" onClick={() => setOpen(true)}>Utløs feil</Button>
    <Toast open={open} onOpenChange={setOpen} variant="danger">
      <div style={{ display: "grid", gap: "0.25rem" }}>
        <ToastTitle>Noe gikk galt</ToastTitle>
        <ToastDescription>Kunne ikke lagre endringene. Prøv igjen.</ToastDescription>
      </div>
    </Toast>
    <ToastViewport />
  </ToastProvider>
);
}
render(<ToastDangerDemo />);

Suksess-variant

function ToastSuccessDemo() {
const [open, setOpen] = React.useState(false);
return (
  <ToastProvider>
    <Button onClick={() => setOpen(true)}>Publiser artikkel</Button>
    <Toast open={open} onOpenChange={setOpen} variant="success">
      <div style={{ display: "grid", gap: "0.25rem" }}>
        <ToastTitle>Publisert!</ToastTitle>
        <ToastDescription>Artikkelen er nå synlig for alle.</ToastDescription>
      </div>
    </Toast>
    <ToastViewport />
  </ToastProvider>
);
}
render(<ToastSuccessDemo />);

Advarsel-variant

function ToastWarningDemo() {
const [open, setOpen] = React.useState(false);
return (
  <ToastProvider>
    <Button onClick={() => setOpen(true)}>Lagre utkast</Button>
    <Toast open={open} onOpenChange={setOpen} variant="warning">
      <div style={{ display: "grid", gap: "0.25rem" }}>
        <ToastTitle>Utkastet er ikke publisert</ToastTitle>
        <ToastDescription>Artikkelen er lagret, men er ikke synlig for andre ennå.</ToastDescription>
      </div>
    </Toast>
    <ToastViewport />
  </ToastProvider>
);
}
render(<ToastWarningDemo />);

Bruksanbefalinger

Lagret!

Bruk for flyktige bekreftelser

Toast passer for korte meldinger som ikke krever brukerhandling — f.eks. 'Lagret', 'Kopiert' eller 'Sendt'.

Kontoen din blir slettet om 24 timer

Ikke bruk for viktig informasjon

Toast forsvinner automatisk. For kritiske meldinger som krever handling, bruk Alert eller Dialog i stedet.

Tilgjengelighet

Toast rendres med role="status" og aria-live="polite" som standard
Danger-toasts bør bruke type="foreground" for å annonseres umiddelbart
ToastAction krever altText som beskriver handlingen for skjermlesere
Tastaturnavigasjon: F8 fokuserer toast-området, Escape lukker
Sveip-for-å-lukke på touch-enheter
ToastClose har et skjult tilgjengelig navn («Lukk»)

Props

toast(options)

Option	Type	Default	Beskrivelse
`title`	`ReactNode`	—	Tittelen på varselet
`description`	`ReactNode`	—	Utfyllende tekst
`variant`	`"default" \| "success" \| "warning" \| "danger"`	`"default"`	Visuell variant
`action`	`ReactElement` (`ToastAction`)	—	Handlingsknapp
`duration`	`number`	`5000`	Tid i ms før auto-lukking

Øvrige props fra Toast kan også sendes med. Maks tre toasts vises samtidig.

Toaster

Prop	Type	Default	Beskrivelse
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`"top-right"`	Hjørnet toasts vises i. På mobil styrer den bare topp eller bunn

Tar i tillegg imot propsene til ToastProvider (f.eks. duration). swipeDirection følger position med mindre du setter den selv.

Toast

Prop	Type	Default	Beskrivelse
`variant`	`"default" \| "success" \| "warning" \| "danger"`	`"default"`	Visuell variant
`open`	`boolean`	—	Kontrollert åpen-tilstand
`onOpenChange`	`(open: boolean) => void`	—	Kalles når tilstand endres
`duration`	`number`	`5000`	Tid i ms før auto-lukking
`type`	`"foreground" \| "background"`	`"foreground"`	Påvirker skjermleser-annonsering

ToastAction

Prop	Type	Default	Beskrivelse
`altText`	`string`	—	Beskrivelse av handlingen for skjermlesere (påkrevd)

ToastProvider

Prop	Type	Default	Beskrivelse
`duration`	`number`	`5000`	Standard varighet for alle toasts
`swipeDirection`	`"right" \| "left" \| "up" \| "down"`	`"right"`	Sveiperetning for å lukke