Toast

The toast is used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feedback to users after an action has taken place.

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 "@chakra-ui/core";

import { useToast } from "@chakra-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,
        })
      }
    >
      Show Toast
    </Button>
  );
}

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,
        })
      }
    >
      Show Toast
    </Button>
  );
}

Editable Example

Custom component#

Display a custom component instead of the default Toast UI.

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

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

Editable Example

Success#

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

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

Editable Example

Warning#

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

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

Editable Example

Error#

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

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

Editable Example

Position#

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

function PositionExample() {
  const toast = useToast();
  return (
    <Button
      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>
  );
}

function PositionExample() {
  const toast = useToast();
  return (
    <Button
      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>
  );
}

Editable Example

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`, `error`, `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`		The description of the toast.

Proudly made in 🇳🇬

Released under the MIT License.

Toast

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Custom component#

Success#

Warning#

Error#

Position#

Props#

Import#