Toast

feedback

A succinct message that is displayed temporarily, with support for actions.

Preview

    Installation

    npm install @launchapp/design-system
    Import
    import { Toaster, useToast } from "@launchapp/design-system";

    Examples

    Toast Usage

    function ToastExample() {  const { toast } = useToast();  return (    <>      <Toaster />      <Button        onClick={() => toast({ title: "Scheduled", description: "Monday, January 3rd at 6:00pm" })}      >        Show Toast      </Button>    </>  );}

    Props

    PropTypeDefaultDescription
    variant
    		"default" | "destructive""default"The visual style of the toast.
    title
    		string—Toast title.
    description
    		string—Toast description.
    duration
    		number5000Auto-dismiss duration in ms.
    action
    		ToastActionElement—Optional action button element.
    ← PreviousTextarea
    Next →Toggle