Toast

Import#

import { useToast } from '@chakra-ui/react'

Usage#

The toast will close itself when the close button is clicked, or after a timeout.

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.

Make sure to call useToast at least one component level below the <ChakraProvider> because it needs access to the current theme.

Promise Based Toast#

Display a toast asynchronously based on a Promise for loading, success, and error states:

• loading will be shown until the promise is either resolved or rejected.
• success will be shown when/if the promise is resolved.
• error will be shown when/if the promise is rejected.

Example#

Custom component#

Display a custom component instead of the default Toast UI.

Closing Toasts#

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

Updating Toasts#

Toasts' options can be updated, by passing an id and the new options to the update instance method.

Status#

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

Variants#

Toast uses the same variants as the Alert component.

Custom container styles#

The toast function now exposes a containerStyle property you can use to override the default styles for the toast container.

Changing the toast position#

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

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>
  )
}

Configuring toast globally#

You can configure the toast globally by passing the toastOptions prop to the ChakraProvider component.

The toastOptions prop accepts the same options as the useToast hook.

<ChakraProvider toastOptions={{ defaultOptions: { position: 'bottom' } }}>
  <App />
</ChakraProvider>

Besides the defaultOptions, you can also pass the following options:

• motionVariants: The framer motion variants for the toast container. This controls the animations for the toasts.

• component: The custom component to use for the toast

• portalProps: The props to pass to the toast's portal component

• toastSpacing: The spacing between toasts. The default is 0.5rem

Standalone Toasts#

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

🚨 If you're using a custom theme, you must pass it in the arguments to createStandaloneToast. If you don't, the default theme will be applied, causing the font size of your page to shift when the toast is open.

import * as ReactDOM from 'react-dom/client'
import { createStandaloneToast } from '@chakra-ui/react'

const { ToastContainer, toast } = createStandaloneToast()

// render the ToastContainer in your React root
const rootElement = document.getElementById('root')
ReactDOM.createRoot(yourRootElement).render(
  <>
    <App />
    <ToastContainer />
  </>,
)

toast({
  title: 'An error occurred.',
  description: 'Unable to create user account.',
  status: 'error',
  duration: 9000,
  isClosable: true,
})

Props#