var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),T=(e,n)=>{for(var o in n)a(e,o,{get:n[o],enumerable:!0})},r=(e,n,o,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of p(n))!g.call(e,s)&&s!==o&&a(e,s,{get:()=>n[s],enumerable:!(i=u(n,s))||i.enumerable});return e};var y=(e,n,o)=>(o=e!=null?h(m(e)):{},r(n||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),b=e=>r(a({},"__esModule",{value:!0}),e);var l=f((B,c)=>{c.exports=_jsx_runtime});var x={};T(x,{default:()=>k,frontmatter:()=>v});var t=y(l()),v={id:"toast",category:"feedback",title:"Toast",package:"@chakra-ui/toast",description:"The toast component is used to give feedback to users after an action has taken place."};function d(e){let n=Object.assign({h2:"h2",pre:"pre",code:"code",p:"p",blockquote:"blockquote",ul:"ul",li:"li",a:"a",strong:"strong"},e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"import",children:"Import"}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:`import { useToast } from '@chakra-ui/react' `})}),` `,(0,t.jsx)(n.h2,{id:"usage",children:"Usage"}),` `,(0,t.jsx)(n.p,{children:`The toast will close itself when the close button is clicked, or after a timeout.`}),` `,(0,t.jsx)(n.p,{children:`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.`}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:`function ToastExample() { const toast = useToast() return ( ) } `})}),` `,(0,t.jsxs)(n.blockquote,{children:[` `,(0,t.jsxs)(n.p,{children:["Make sure to call ",(0,t.jsx)(n.code,{children:"useToast"}),` at least one component level below the `,(0,t.jsx)(n.code,{children:""})," because it needs access to the current theme."]}),` `]}),` `,(0,t.jsx)(n.h2,{id:"promise-based-toast",children:"Promise-Based Toast"}),` `,(0,t.jsxs)(n.p,{children:["Display a toast asynchronously based on a ",(0,t.jsx)(n.code,{children:"Promise"})," for ",(0,t.jsx)(n.code,{children:"loading"}),", ",(0,t.jsx)(n.code,{children:"success"}),`, and `,(0,t.jsx)(n.code,{children:"error"})," states:"]}),` `,(0,t.jsxs)(n.ul,{children:[` `,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"loading"})," will be shown until the promise is either resolved or rejected."]}),` `,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"success"})," will be shown when/if the promise is resolved."]}),` `,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"error"})," will be shown when/if the promise is rejected."]}),` `]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:`function PromiseBasedToastExample() { const toast = useToast() return ( ) } `})}),` `,(0,t.jsx)(n.h2,{id:"custom-component",children:"Custom component"}),` `,(0,t.jsx)(n.p,{children:"Display a custom component instead of the default Toast UI."}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:`function CustomToastExample() { const toast = useToast() return ( ) } `})}),` `,(0,t.jsx)(n.h2,{id:"closing-toasts",children:"Closing Toasts"}),` `,(0,t.jsxs)(n.p,{children:["Toasts can be closed imperatively, individually (via the ",(0,t.jsx)(n.code,{children:"close"}),` instance method) or all together (via the `,(0,t.jsx)(n.code,{children:"closeAll"})," instance method)."]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:`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 ( ) } `})}),` `,(0,t.jsx)(n.h2,{id:"updating-toasts",children:"Updating Toasts"}),` `,(0,t.jsxs)(n.p,{children:["Toasts' options can be updated, by passing an ",(0,t.jsx)(n.code,{children:"id"})," and the new ",(0,t.jsx)(n.code,{children:"options"}),` to the `,(0,t.jsx)(n.code,{children:"update"})," instance method."]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:`function UpdatingToastExample() { const toast = useToast() const toastIdRef = React.useRef() function update() { if (toastIdRef.current) { toast.update(toastIdRef.current, { description: 'new text' }) } } function addToast() { toastIdRef.current = toast({ description: 'some text' }) } return ( ) } `})}),` `,(0,t.jsx)(n.h2,{id:"status",children:"Status"}),` `,(0,t.jsxs)(n.p,{children:["You can use ",(0,t.jsx)(n.code,{children:"status"})," to change the color of your toasts."]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:`function ToastStatusExample() { const toast = useToast() const statuses = ['success', 'error', 'warning', 'info'] return ( {statuses.map((status, i) => ( ))} ) } `})}),` `,(0,t.jsx)(n.h2,{id:"variants",children:"Variants"}),` `,(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"Toast"}),` uses the same variants as the `,(0,t.jsx)(n.a,{href:"https://chakra-ui.com/docs/components/feedback/alert",children:(0,t.jsx)(n.code,{children:"Alert"})})," component."]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:`function ToastVariantsExample() { const toast = useToast() const variants = ['solid', 'subtle', 'left-accent', 'top-accent'] return ( {variants.map((variant, i) => ( ))} ) } `})}),` `,(0,t.jsx)(n.h2,{id:"custom-container-styles",children:"Custom container styles"}),` `,(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"toast"})," function now exposes a ",(0,t.jsx)(n.code,{children:"containerStyle"}),` property you can use to override the default styles for the toast container.`]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:`function Example() { // Via instantiation const toast = useToast({ position: 'top', title: 'Container style is updated', containerStyle: { width: '800px', maxWidth: '100%', }, }) // Or via trigger // Style here will overwrite the entire style above return ( ) } `})}),` `,(0,t.jsx)(n.h2,{id:"changing-the-toast-position",children:"Changing the toast position"}),` `,(0,t.jsxs)(n.p,{children:["Using the ",(0,t.jsx)(n.code,{children:"position"})," prop you can adjust where your toast will be popup from."]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:`function PositionExample() { const toast = useToast() const positions = [ 'top', 'top-right', 'top-left', 'bottom', 'bottom-right', 'bottom-left', ] return ( {positions.map((position, i) => ( ))} ) } `})}),` `,(0,t.jsx)(n.h2,{id:"preventing-duplicate-toast",children:"Preventing duplicate toast"}),` `,(0,t.jsxs)(n.p,{children:[`In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an `,(0,t.jsx)(n.code,{children:"id"})," and use the ",(0,t.jsx)(n.code,{children:"toast.isActive"}),` method to determine when to call `,(0,t.jsx)(n.code,{children:"toast(...)"}),"."]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",live:"false",children:`function PreventDuplicateExample() { const toast = useToast() const id = 'test-toast' return ( ) } `})}),` `,(0,t.jsx)(n.h2,{id:"configuring-toast-globally",children:"Configuring toast globally"}),` `,(0,t.jsxs)(n.p,{children:["You can configure the toast globally by passing the ",(0,t.jsx)(n.code,{children:"toastOptions"}),` prop to the `,(0,t.jsx)(n.code,{children:"ChakraProvider"})," component."]}),` `,(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"toastOptions"})," prop accepts the same options as the ",(0,t.jsx)(n.code,{children:"useToast"})," hook."]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",live:"false",children:` `})}),` `,(0,t.jsxs)(n.p,{children:["Besides the ",(0,t.jsx)(n.code,{children:"defaultOptions"}),", you can also pass the following options:"]}),` `,(0,t.jsxs)(n.ul,{children:[` `,(0,t.jsxs)(n.li,{children:[` `,(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"motionVariants"}),`: The framer motion variants for the toast container. This controls the animations for the toasts.`]}),` `]}),` `,(0,t.jsxs)(n.li,{children:[` `,(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"component"}),": The custom component to use for the toast"]}),` `]}),` `,(0,t.jsxs)(n.li,{children:[` `,(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"portalProps"}),": The props to pass to the toast's portal component"]}),` `]}),` `,(0,t.jsxs)(n.li,{children:[` `,(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"toastSpacing"}),": The spacing between toasts. The default is ",(0,t.jsx)(n.code,{children:"0.5rem"})]}),` `]}),` `]}),` `,(0,t.jsx)(n.h2,{id:"standalone-toasts",children:"Standalone Toasts"}),` `,(0,t.jsxs)(n.p,{children:["Use ",(0,t.jsx)(n.code,{children:"createStandaloneToast"}),` to create toasts from outside of your React Components. Both `,(0,t.jsx)(n.code,{children:"ChakraProvider"})," and ",(0,t.jsx)(n.code,{children:"ToastContainer"}),` will render a `,(0,t.jsx)(n.code,{children:"ToastProvider"}),", so only include ",(0,t.jsx)(n.code,{children:""}),` to create toasts from outside `,(0,t.jsx)(n.code,{children:"ChakraProvider"}),"."]}),` `,(0,t.jsxs)(n.blockquote,{children:[` `,(0,t.jsxs)(n.p,{children:["\u{1F6A8} If you're using a custom theme, you ",(0,t.jsx)(n.strong,{children:"must"}),` pass it in the arguments to `,(0,t.jsx)(n.code,{children:"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.`]}),` `]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:`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( <> , ) toast({ title: 'An error occurred.', description: 'Unable to create user account.', status: 'error', duration: 9000, isClosable: true, }) `})})]})}function C(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,Object.assign({},e,{children:(0,t.jsx)(d,e)})):d(e)}var k=C;return b(x);})(); ;return Component;

Toast

Props#

Props#