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 feeback 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 Example() {
  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 Example() {
  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 Example() {
  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 Example() {
  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

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

Standalone#

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	Default	Description
`title`	`React.ReactNode`		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`	`React.ReactNode`		The description of the toast.
`status`	`default`, `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`		Callback function to display a custom toast.

Edit this page