var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),y=(e,n)=>{for(var o in n)s(e,o,{get:n[o],enumerable:!0})},c=(e,n,o,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of h(n))!f.call(e,a)&&a!==o&&s(e,a,{get:()=>n[a],enumerable:!(i=p(n,a))||i.enumerable});return e};var T=(e,n,o)=>(o=e!=null?u(m(e)):{},c(n||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),b=e=>c(s({},"__esModule",{value:!0}),e);var l=g((w,r)=>{r.exports=_jsx_runtime});var v={};y(v,{default:()=>C,frontmatter:()=>x});var t=T(l()),x={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",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:"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:"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.`]}),` `,(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/toast' 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 k(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,Object.assign({},e,{children:(0,t.jsx)(d,e)})):d(e)}var C=k;return b(v);})(); ;return Component;

Toast

Props#