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.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

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/react"

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 CustomToastExample() {
  const toast = useToast()
  return (
    <Button
      onClick={() =>
        toast({
          position: "bottom-left",
          render: () => (
            <Box color="white" p={3} bg="blue.500">
              Hello World
            </Box>
          ),
        })
      }
    >
      Show Toast
    </Button>
  )
}

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

Editable Example

Closing Toasts#

Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method).

function ClosingToastExample() {
  const toast = useToast()
  const toastIdRef = React.useRef()

  function close() {
    if (toastIdRef.current) {
      toast.close(toastIdRef.current)
    }
  }

  function closeAll() {
    // you may optionally pass an object of positions to exclusively close
    // keeping other positions opened
    // e.g. `{ positions: ['bottom'] }`
    toast.closeAll()
  }

  function addToast() {
    toastIdRef.current = toast({ description: "some text" })
  }

  return (
    <Stack isInline spacing={2}>
      <Button onClick={addToast} type="button">
        Toast
      </Button>

      <Button onClick={close} type="button" variant="outline">
        Close last toast
      </Button>

      <Button onClick={closeAll} type="button" variant="outline">
        Close all toasts
      </Button>
    </Stack>
  )
}

function ClosingToastExample() {
  const toast = useToast()
  const toastIdRef = React.useRef()
  function close() {
    if (toastIdRef.current) {
      toast.close(toastIdRef.current)
    }
  }
  function closeAll() {
    // you may optionally pass an object of positions to exclusively close
    // keeping other positions opened
    // e.g. `{ positions: ['bottom'] }`
    toast.closeAll()
  }
  function addToast() {
    toastIdRef.current = toast({ description: "some text" })
  }
  return (
    <Stack isInline spacing={2}>
      <Button onClick={addToast} type="button">
        Toast
      </Button>
      <Button onClick={close} type="button" variant="outline">
        Close last toast
      </Button>
      <Button onClick={closeAll} type="button" variant="outline">
        Close all toasts
      </Button>
    </Stack>
  )
}

Editable Example

Status#

You can use status to change the color of your toasts.

function ToastStatusExample() {
  const toast = useToast()
  const statuses = ["success", "error", "warning", "info"]

  return (
    <Wrap>
      {statuses.map((status, i) => (
        <WrapItem key={i}>
          <Button
            onClick={() =>
              toast({
                title: `${status} toast`,
                status: status,
                isClosable: true,
              })
            }
          >
            Show {status} toast
          </Button>
        </WrapItem>
      ))}
    </Wrap>
  )
}

function ToastStatusExample() {
  const toast = useToast()
  const statuses = ["success", "error", "warning", "info"]
  return (
    <Wrap>
      {statuses.map((status, i) => (
        <WrapItem key={i}>
          <Button
            onClick={() =>
              toast({
                title: `${status} toast`,
                status: status,
                isClosable: true,
              })
            }
          >
            Show {status} toast
          </Button>
        </WrapItem>
      ))}
    </Wrap>
  )
}

Editable Example

Variants#

Toast uses the same variants as the Alert component.

function ToastVariantsExample() {
  const toast = useToast()
  const variants = ["solid", "subtle", "left-accent", "top-accent"]

  return (
    <Wrap>
      {variants.map((variant, i) => (
        <WrapItem key={i}>
          <Button
            onClick={() =>
              toast({
                title: `${variant} toast`,
                variant: variant,
                isClosable: true,
              })
            }
          >
            Show {variant} toast
          </Button>
        </WrapItem>
      ))}
    </Wrap>
  )
}

function ToastVariantsExample() {
  const toast = useToast()
  const variants = ["solid", "subtle", "left-accent", "top-accent"]
  return (
    <Wrap>
      {variants.map((variant, i) => (
        <WrapItem key={i}>
          <Button
            onClick={() =>
              toast({
                title: `${variant} toast`,
                variant: variant,
                isClosable: true,
              })
            }
          >
            Show {variant} toast
          </Button>
        </WrapItem>
      ))}
    </Wrap>
  )
}

Editable Example

Changing the toast position#

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

function PositionExample() {
  const toast = useToast()
  const positions = [
    "top",
    "top-right",
    "top-left",
    "bottom",
    "bottom-right",
    "bottom-left",
  ]

  return (
    <Wrap>
      {positions.map((position, i) => (
        <WrapItem key={i}>
          <Button
            onClick={() =>
              toast({
                title: `${position} toast`,
                position: position,
                isClosable: true,
              })
            }
          >
            Show {position} toast
          </Button>
        </WrapItem>
      ))}
    </Wrap>
  )
}

function PositionExample() {
  const toast = useToast()
  const positions = [
    "top",
    "top-right",
    "top-left",
    "bottom",
    "bottom-right",
    "bottom-left",
  ]
  return (
    <Wrap>
      {positions.map((position, i) => (
        <WrapItem key={i}>
          <Button
            onClick={() =>
              toast({
                title: `${position} toast`,
                position: position,
                isClosable: true,
              })
            }
          >
            Show {position} toast
          </Button>
        </WrapItem>
      ))}
    </Wrap>
  )
}

Editable Example

Preventing Duplicate Toast#

In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast(...).

function PreventDuplicateExample() {
  const toast = useToast()
  const id = "test-toast"
  return (
    <Button
      onClick={() => {
        if (!toast.isActive(id)) {
          toast({
            id,
            title: "Hey! You can create a duplicate toast",
          })
        }
      }}
    >
      Click me!
    </Button>
  )
}

Standalone Toasts#

Use createStandaloneToast to create toasts from outside of your React Components.

import { createStandaloneToast } from "@chakra-ui/react"
const toast = createStandaloneToast()
// const customToast = createStandaloneToast({ theme: yourCustomTheme })
toast({
  title: "An error occurred.",
  description: "Unable to create user account.",
  status: "error",
  duration: 9000,
  isClosable: true,
})

Props#

Name	Type	Description	Default
description	`ReactNode`	The description of the toast	-
duration	`number \| null`	The delay before the toast hides (in milliseconds) If set to `null`, toast will never dismiss.	`5000 ( = 5000ms )`
id	`string \| number`	The `id` of the toast. Mostly used when you need to prevent duplicate. By default, we generate a unique `id` for each toast	-
isClosable	`boolean`	If `true`, toast will show a close button	-
onCloseComplete	`(() => void)`	Callback function to run side effects after the toast has closed.	-
position	`"top" \| "bottom" \| "top-right" \| "top-left" \| "bottom-right" \| "bottom-left"`	The placement of the toast	`"bottom"`
render	`((props: RenderProps) => ReactNode)`	Render a component toast component. Any component passed will receive 2 props: `id` and `onClose`.	-
status	`"info" \| "warning" \| "success" \| "error"`	The status of the toast.	-
title	`ReactNode`	The title of the toast	-
variant	`string`	The alert component `variant` to use	-

Edit this page