Components

Toast

Toasts are a type of feedback box that provide confirmation of whether an action has been successful or if an error has occurred.

Examples

A simple information toast

() => {
  const toast = useToast();
  return (
    <Button 
      variant="secondary" 
      onClick={() => 
        toast({ variant: 'success', text: "Toast vises!" })
      }
    >
      Vis toast
    </Button>
  );
}

A closable toast

() => {
  const toast = useToast();
  return (
    <Button 
      variant="secondary" 
      onClick={() => 
        toast({ 
          variant: 'info', 
          text: "En toast du kan lukke", 
          isClosable: true
        })
      }
    >
      Vis toast
    </Button>
  );
}

Toast with a button

() => {
  const toast = useToast();
  return (
    <Button 
      variant="secondary" 
      onClick={() => 
        toast({ 
          variant: 'error', 
          text: "Tog forsinket!", 
          buttonText: "Angre",
          onClick: () => alert("No backsies!")
        })
      }
    >
      Forsinke tog
    </Button>
  );
}

Toast with long text and long duration

() => {
  const toast = useToast();
  return (
    <Button 
      variant="secondary" 
      onClick={() => 
        toast({ 
          variant: 'success', 
          text: "Man burde i de aller fleste tilfeller unngå å ha så veldig mye tekst i toast-meldinger. De forsvinner jo tross alt av seg selv etter noen få sekunder. Men du kan utsette visningstiden til å være så lenge du vil med `duration` propen. Send inn antall millisekunder du vil at den skal vises før den lukkes.", 
          duration: 9000,
        })
      }
    >
      Vis toast
    </Button>
  );
}