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.
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 { useToast } from "@chakra-ui/react"
Show Toast
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 >
)
}
copy Editable Example
Display a custom component instead of the default Toast UI.
Show Toast
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 >
)
}
copy Editable Example
Toasts can be closed imperatively, individually (via the close instance
method) or all together (via the closeAll instance method).
Toast Close last toast Close all toasts
function Example ( ) {
const toast = useToast ( )
const toastIdRef = React . useRef ( )
function close ( ) {
if ( toastIdRef . current ) {
toast . close ( toastIdRef . current )
}
}
function closeAll ( ) {
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 >
)
}
copy Editable Example
Show Success Toast
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 >
)
}
copy Editable Example
Show Warning Toast
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 >
)
}
copy Editable Example
Show Error Toast
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 >
)
}
copy Editable Example
Using the position prop you can adjust where your toast will be popup from.
Show Toast
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 >
)
}
copy Editable Example
Use createStandaloneToast to create toasts from outside of your React
Components.
import { createStandaloneToast } from "@chakra-ui/react"
const toast = createStandaloneToast ( )
toast ( {
title : "An error occurred." ,
description : "Unable to create user account." ,
status : "error" ,
duration : 9000 ,
isClosable : true ,
} )
Name Type Default Description titlebooleanThe title of the toast. isClosablebooleanfalseIf true adds a close button to the toast. onClosefunctionCallback function to close the toast. descriptionstringThe description of the toast. statusdefault, success, error, warning, infoThe status of the toast. durationnumber5000msDuration before dismiss in milliseconds, or null to never dismiss. positiontop, top-left, top-right, bottom, bottom-left, bottom-rightbottomPosition the toast will popup out from. render(props: {onClose:() => void, id: string}) => React.ReactNodeCallback function to display a custom toast.