A toast component displays transient, potentially dismissible notifications about application events or status. Common uses include asynchronous feedback such as successful account creation or failed message delivery. section 13.2 section 13.2.3
Implement the component around these architectural and behavioral requirements:
- Wrap the relevant application section in a ToastProvider; invoke the useToast hook to display messages. section 13.2.3
- Render messages globally at the browser window’s bottom-center position with a React portal, regardless of provider placement in the DOM. section 13.2.3
- Support primary and inverted styles through isOutline, optional dismissal through canDismiss, and automatic three-second removal unless isPersistent is true. section 13.2.3
- Follow WAI-ARIA best practices for a polite live region. section 13.2.3
Provider and hook usage
<ToastProvider>\n <App />\n</ToastProvider>\n\nconst addToast = useToast();\naddToast({\n message: "This is the toast message",\n canDismiss: false,\n isPersistent: false,\n isOutline: false\n});
