Toast

Kildekode på GitHub · Les som Markdown

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.

Importering

import {
  ToastProvider,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastAction,
  ToastClose,
  ToastViewport,
} from "@kilden/designsystem";

Grunnleggende bruk

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 />);

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

Props

Toast

Prop	Type	Default	Beskrivelse
`variant`	`"default" \| "success" \| "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