Netzo Logo

toast

A succinct message that is displayed temporarily.

shadcn/ui radix-ui Storybook Figma

Usage

After installation components can be imported and used directly.

import {
  Toast,
  ToastAction,
  type ToastActionElement,
  ToastClose,
  ToastDescription,
  type ToastProps,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from 'netzo/components/toast.tsx'

Examples

Working examples to copy-paste into projects under components/.

Default

import { Button } from "netzo/components/button.tsx";
import { ToastAction } from "netzo/components/toast.tsx";
import { useToast } from "netzo/components/use-toast.ts";

export default () => {
  const { toast } = useToast();

  return (
    <Button
      variant="outline"
      onClick={() => {
        toast({
          title: "Scheduled: Catch up ",
          description: "Friday, February 10, 2023 at 5:57 PM",
          action: (
            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
          ),
        });
      }}
    >
      Add to calendar
    </Button>
  );
};

Destructive

import { Button } from "netzo/components/button.tsx";
import { ToastAction } from "netzo/components/toast.tsx";
import { useToast } from "netzo/components/use-toast.ts";

export default () => {
  const { toast } = useToast();

  return (
    <Button
      variant="outline"
      onClick={() => {
        toast({
          variant: "destructive",
          title: "Uh oh! Something went wrong.",
          description: "There was a problem with your request.",
          action: <ToastAction altText="Try again">Try again</ToastAction>,
        });
      }}
    >
      Show Toast
    </Button>
  );
};

Simple

import { Button } from "netzo/components/button.tsx";
import { useToast } from "netzo/components/use-toast.ts";

export default () => {
  const { toast } = useToast();

  return (
    <Button
      variant="outline"
      onClick={() => {
        toast({
          description: "Your message has been sent.",
        });
      }}
    >
      Show Toast
    </Button>
  );
};

With Action

import { Button } from "netzo/components/button.tsx";
import { ToastAction } from "netzo/components/toast.tsx";
import { useToast } from "netzo/components/use-toast.ts";

export default () => {
  const { toast } = useToast();

  return (
    <Button
      variant="outline"
      onClick={() => {
        toast({
          title: "Uh oh! Something went wrong.",
          description: "There was a problem with your request.",
          action: <ToastAction altText="Try again">Try again</ToastAction>,
        });
      }}
    >
      Show Toast
    </Button>
  );
};

With Title

import { Button } from "netzo/components/button.tsx";
import { useToast } from "netzo/components/use-toast.ts";

export default () => {
  const { toast } = useToast();

  return (
    <Button
      variant="outline"
      onClick={() => {
        toast({
          title: "Uh oh! Something went wrong.",
          description: "There was a problem with your request.",
        });
      }}
    >
      Show Toast
    </Button>
  );
};