Toast

The toast is used to show alerts on top of an overlay

Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time.

Import#

import { useToast } from "@nature-ui/core";

Usage#

function ToastExample() {
  const toast = useToast();
  return (
    <Button
      onClick={() =>
        toast({
          title: "Account created.",
          description: "We've created your account for you.",
          status: "success",
          duration: 9000,
          isClosable: true,
        })
      }
      className="bg-primary-500"
    >
      Show Toast
    </Button>
  );
}

Custom component#

Display a custom component instead of the default Toast UI.

function Example() {
  const toast = useToast();
  return (
    <Button
      className="bg-primary-500"
      onClick={() =>
        toast({
          position: "bottom-left",
          render: () => (
            <Box className="bg-blue-500 m-2 text-white p-3">Hello World</Box>
          ),
        })
      }
    >
      Show Toast
    </Button>
  );
}

Warning#

function Example() {
  const toast = useToast();
  return (
    <Button
      className="bg-primary-500"
      onClick={() =>
        toast({
          title: "Warning.",
          description: "This is a warning.",
          status: "warning",
          duration: 9000,
          isClosable: true,
        })
      }
    >
      Show Warning Toast
    </Button>
  );
}

Error#

function ErrorToast() {
  const toast = useToast();
  return (
    <Button
      className="bg-primary-500"
      onClick={() =>
        toast({
          title: "An error occurred.",
          description: "Unable to create user account.",
          status: "error",
          duration: 9000,
          isClosable: true,
        })
      }
    >
      Show Error Toast
    </Button>
  );
}

Position#

Using the position prop you can adjust where your toast will be popup from.

function PositionExample() {
  const toast = useToast();
  return (
    <Button
      className="bg-primary-500"
      onClick={() =>
        toast({
          position: "bottom-left",
          title: "Account created.",
          description: "We've created your account for you.",
          status: "success",
          duration: 9000,
          isClosable: true,
        })
      }
    >
      Show Toast
    </Button>
  );
}

Props#

Name	Type	Default	Description
title	`string`		The title of the toast.
isClosable	`boolean`	`false`	If `true` adds a close button to the toast.
onClose	`function`		Callback function to close the toast.
description	`string`		The description of the toast.
status	`success`, `danger`, `warning`, `info`		The status of the toast.
duration	`number`	`5000ms`	Duration before dismiss in milliseconds, or `null` to never dismiss.
position	`top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`	`bottom`	Position the toast will popup out from.
render	`(props: {onClose:() => void, id: string}) => React.ReactNode`		Callback function to display a custom toast.