Toast
The toast component is used to give feedback to users after an action has taken place.
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.
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 (<ButtononClick={() => {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 is0.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/toast'const { ToastContainer, toast } = createStandaloneToast()// render the ToastContainer in your React rootconst 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,})