1"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[2999],{28453:(t,e,o)=>{o.d(e,{R:()=>i,x:()=>r});var n=o(96540);const a={},s=n.createContext(a);function i(t){const e=n.useContext(s);return n.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function r(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(a):t.components||a:i(t.components),n.createElement(s.Provider,{value:e},t.children)}},33689:(t,e,o)=>{o.r(e),o.d(e,{assets:()=>T,contentTitle:()=>h,default:()=>f,frontMatter:()=>p,metadata:()=>n,toc:()=>g});const n=JSON.parse('{"id":"components/toasts","title":"Toasts","description":"Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.","source":"@site/docs/components/toasts.mdx","sourceDirName":"components","slug":"/components/toasts","permalink":"/docs/components/toasts","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Toasts","description":"Push notifications to your visitors with a toast, a lightweight and easily customizable alert message."},"sidebar":"sidebar","previous":{"title":"Tabs","permalink":"/docs/components/tabs"},"next":{"title":"Transitions","permalink":"/docs/utilities/transitions"}}');var a=o(74848),s=o(28453);const i='import Toast from \'react-bootstrap/Toast\';\n\nfunction BasicExample() {\n return (\n <Toast>\n <Toast.Header>\n <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />\n <strong className="me-auto">Bootstrap</strong>\n <small>11 mins ago</small>\n </Toast.Header>\n <Toast.Body>Hello, world! This is a toast message.</Toast.Body>\n </Toast>\n );\n}\n\nexport default BasicExample;\n',r='import React, { useState } from \'react\';\nimport Button from \'react-bootstrap/Button\';\nimport Col from \'react-bootstrap/Col\';\nimport Row from \'react-bootstrap/Row\';\nimport Toast from \'react-bootstrap/Toast\';\n\nfunction DismissibleExample() {\n const [showA, setShowA] = useState(true);\n const [showB, setShowB] = useState(true);\n\n const toggleShowA = () => setShowA(!showA);\n const toggleShowB = () => setShowB(!showB);\n\n return (\n <Row>\n <Col md={6} className="mb-2">\n <Button onClick={toggleShowA} className="mb-2">\n Toggle Toast <strong>with</strong> Animation\n </Button>\n <Toast show={showA} onClose={toggleShowA}>\n <Toast.Header>\n <img\n src="holder.js/20x20?text=%20"\n className="rounded me-2"\n alt=""\n />\n <strong className="me-auto">Bootstrap</strong>\n <small>11 mins ago</small>\n </Toast.Header>\n <Toast.Body>Woohoo, you\'re reading this text in a Toast!</Toast.Body>\n </Toast>\n </Col>\n <Col md={6} className="mb-2">\n <Button onClick={toggleShowB} className="mb-2">\n Toggle Toast <strong>without</strong> Animation\n </Button>\n <Toast onClose={toggleShowB} show={showB} animation={false}>\n <Toast.Header>\n <img\n src="holder.js/20x20?text=%20"\n className="rounded me-2"\n alt=""\n />\n <strong className="me-auto">Bootstrap</strong>\n <small>11 mins ago</small>\n </Toast.Header>\n <Toast.Body>Woohoo, you\'re reading this text in a Toast!</Toast.Body>\n </Toast>\n </Col>\n </Row>\n );\n}\n\nexport default DismissibleExample;\n',l='import Toast from \'react-bootstrap/Toast\';\nimport ToastContainer from \'react-bootstrap/ToastContainer\';\n\nfunction StackingExample() {\n return (\n <ToastContainer className="position-static">\n <Toast>\n <Toast.Header>\n <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />\n <strong className="me-auto">Bootstrap</strong>\n <small className="text-muted">just now</small>\n </Toast.Header>\n <Toast.Body>See? Just like this.</Toast.Body>\n </Toast>\n <Toast>\n <Toast.Header>\n <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />\n <strong className="me-auto">Bootstrap</strong>\n <small className="text-muted">2 seconds ago</small>\n </Toast.Header>\n <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>\n </Toast>\n </ToastContainer>\n );\n}\n\nexport default StackingExample;
1\n',d="import { useState } from 'react';\nimport Form from 'react-bootstrap/Form';\nimport Toast from 'react-bootstrap/Toast';\nimport ToastContainer from 'react-bootstrap/ToastContainer';\n\nfunction PlacementExample() {\n const [position, setPosition] = useState('top-start');\n\n return (\n <>\n <div className=\"mb-3\">\n <label htmlFor=\"selectToastPlacement\">Toast position</label>\n <Form.Select\n id=\"selectToastPlacement\"\n className=\"mt-2\"\n onChange={(e) => setPosition(e.currentTarget.value)}\n >\n {[\n 'top-start',\n 'top-center',\n 'top-end',\n 'middle-start',\n 'middle-center',\n 'middle-end',\n 'bottom-start',\n 'bottom-center',\n 'bottom-end',\n ].map((p) => (\n <option key={p} value={p}>\n {p}\n </option>\n ))}\n </Form.Select>\n </div>\n\n <div\n aria-live=\"polite\"\n aria-atomic=\"true\"\n className=\"bg-dark position-relative\"\n style={{ minHeight: '240px' }}\n >\n <ToastContainer\n className=\"p-3\"\n position={position}\n style={{ zIndex: 1 }}\n >\n <Toast>\n <Toast.Header closeButton={false}>\n <img\n src=\"holder.js/20x20?text=%20\"\n className=\"rounded me-2\"\n alt=\"\"\n />\n <strong className=\"me-auto\">Bootstrap</strong>\n <small>11 mins ago</small>\n </Toast.Header>\n <Toast.Body>Hello, world! This is a toast message.</Toast.Body>\n </Toast>\n </ToastContainer>\n </div>\n </>\n );\n}\n\nexport default PlacementExample;\n",m='import Toast from \'react-bootstrap/Toast\';\nimport ToastContainer from \'react-bootstrap/ToastContainer\';\n\nfunction PlacementMultiExample() {\n return (\n <div\n aria-live="polite"\n aria-atomic="true"\n className="bg-dark position-relative"\n style={{ minHeight: \'240px\' }}\n >\n <ToastContainer position="top-end" className="p-3" style={{ zIndex: 1 }}>\n <Toast>\n <Toast.Header>\n <img\n src="holder.js/20x20?text=%20"\n className="rounded me-2"\n alt=""\n />\n <strong className="me-auto">Bootstrap</strong>\n <small className="text-muted">just now</small>\n </Toast.Header>\n <Toast.Body>See? Just like this.</Toast.Body>\n </Toast>\n <Toast>\n <Toast.Header>\n <img\n src="holder.js/20x20?text=%20"\n className="rounded me-2"\n alt=""\n />\n <strong className="me-auto">Bootstrap</strong>\n <small className="text-muted">2 seconds ago</small>\n </Toast.Header>\n <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>\n </Toast>\n </ToastContainer>\n </div>\n );\n}\n\nexport default PlacementMultiExample;\n',c="import React, { useState } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Col from 'react-bootstrap/Col';\nimport Row from 'react-bootstrap/Row';\nimport Toast from 'react-bootstrap/Toast';\n\nfunction AutohideExample() {\n const [show, setShow] = useState(false);\n\n return (\n <Row>\n <Col xs={6}>\n <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide>\n <Toast.Header>\n <img\n src=\"holder.js/20x20?text=%20\"\n className=\"rounded me-2\"\n alt=\"\"\n />\n <strong className=\"me-auto\">Bootstrap</strong>\n <small>11 mins ago</small>\n </Toast.Header>\n <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>\n </Toast>\n </Col>\n <Col xs={6}>\n <Button onClick={() => setShow(true)}>Show Toast</Button>\n </Col>\n </Row>\n );\n}\n\nexport default AutohideExample;\n",u="import Toast from 'react-bootstrap/Toast';\n\nfunction ContextualExample() {\n return (\n <>\n {[\n 'Primary',\n 'Secondary',\n 'Success',\n 'Danger',\n 'Warning',\n 'Info',\n 'Light',\n 'Dark',\n ].map((variant, idx) => (\n <Toast\n className=\"d-inline-block m-1\"\n bg={variant.toLowerCase()}\n key={idx}\n >\n <Toast.Header>\n <img\n src=\"holder.js/20x20?text=%20\"\n className=\"rounded me-2\"\n alt=\"\"\n />\n <strong className=\"me-auto\">Bootstrap</strong>\n <small>11 mins ago</small>\n </Toast.Header>\n <Toast.Body className={variant === 'Dark' && 'text-white'}>\n Hello, world! This is a toast message.\n </Toast.Body>\n </Toast>\n ))}\n </>\n );\n}\n\nexport default ContextualExample;\n",p={title:"Toasts",description:"Push notifications to your visitors with a toast, a lightweight and easily customizable alert message."},h=void 0,T={},g=[{value:"Examples",id:"examples",level:2},{value:"Basic",id:"basic",level:3},{value:"Dismissible",id:"dismissible",level:3},{value:"Stacking",id:"stacking",level:3},{value:"Placement",id:"placement",level:3},{value:"Autohide",id:"autohide",level:3},{value:"Contextual variations",id:"contextual-variations",level:3},{value:"API",id:"api",level:2},{value:"Toast",id:"toast",level:3},{value:"ToastHeader",id:"toastheader",level:3},{value:"ToastBody",id:"toastbody",level:3},{value:"ToastContainer",id:"toastcontainer",level:3}];function x(t){const e={code:"code",h2:"h2",h3:"h3",p:"p",...(0,s.R)(),...t.components},{CodeBlock:o,PropsTable:n}=e;return o||y("CodeBlock",!0),n||y("PropsTable",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:"Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They\u2019re built with flexbox, so they\u2019re easy to align and position."}),"\n",(0,a.jsx)(e.h2,{id:"examples",children:"Examples"}),"\n",(0,a.jsx)(e.h3,{id:"basic",children:"Basic"}),"\n",(0,a.jsx)(e.p,{children:"To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities."}),"\n",(0,a.jsx)(e.p,{children:"Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your \u201ctoasted\u201d content and strongly encourage a dismiss button."}),"\n",(0,a.jsx)(o,{language:"jsx",live:!0,children:i}),"\n",(0,a.jsx)(e.h3,{id:"dismissible",children:"Dismissible"}),"\n",(0,a.jsx)(o,{language:"jsx",live:!0,children:r}),"\n",(0,a.jsx)(e.h3,{id:"stacking",children:"Stacking"}),"\n",(0,a.jsx)(e.p,{children:"When you have multiple toasts, we default to vertically stacking them in a readable manner."}),"\n",(0,a.jsx)(o,{language:"jsx",live:!0,children:l}),"\n",(0,a.jsx)(e.h3,{id:"placement",children:"Placement"}),"\n",(0,a.jsxs)(e.p,{children:["Place toasts by setting a ",(0,a.jsx)(e.code,{children:"position"})," in a ",(0,a.jsx)(e.code,{children:"ToastContainer"}),". The top right is often used for notifications, as is the top middle."]}),"\n",(0,a.jsx)(o,{language:"jsx",live:!0,children:d}),"\n",(0,a.jsx)(e.p,{children:"For systems that generate more notifications, consider using a wrapping element so they can easily stack."}),"\n",(0,a.jsx)(o,{language:"jsx",live:!0,children:m}),"\n",(0,a.jsx)(e.h3,{id:"autohide",children:"Autohide"}),"\n",(0,a.jsxs)(e.p,{children:["A Toast can also automatically hide after X milliseconds using the ",(0,a.jsx)(e.code,{children:"autohide"})," prop with the ",(0,a.jsx)(e.code,{children:"delay"})," prop to specify the delay. To open the toast, manually change the show property."]}),"\n",(0,a.jsx)(o,{language:"jsx",live:!0,children:c}),"\n",(0,a.jsx)(e.h3,{id:"contextual-variations",children:"Contextual variations"}),"\n",(0,a.jsx)(e.p,{children:"Add any of the below mentioned modifier classes to change the appearance of a toast."}),"\n",(0,a.jsx)(o,{language:"jsx",live:!0,children:u}),"\n",(0,a.jsx)(e.h2,{id:"api",children:"API"}),"\n",(0,a.jsx)(e.h3,{id:"toast",children:"Toast"}),"\n",(0,a.jsx)(n,{name:"Toast"}),"\n",(0,a.jsx)(e.h3,{id:"toastheader",children:"ToastHeader"}),"\n",(0,a.jsx)(n,{name:"ToastHeader"}),"\n",(0,a.jsx)(e.h3,{id:"toastbody",children:"ToastBody"}),"\n",(0,a.jsx)(n,{name:"ToastBody"}),"\n",(0,a.jsx)(e.h3,{id:"toastcontainer",children:"ToastContainer"}),"\n",(0,a.jsx)(n,{name:"ToastContainer"})]})}function f(t={}){const{wrapper:e}={...(0,s.R)(),...t.components};return e?(0,a.jsx)(e,{...t,children:(0,a.jsx)(x,{...t})}):x(t)}function y(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.