Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.
Read more about toast in the official React Bootstrap Docs.
import { Toast } from "react-bootstrap"
export default function page(props) {
const [toastState, setToastState] = useState(false)
return(
<Toast
show={toastsState}
onClose={() => setToasts(toastState)}
delay={3000}
autohide
>
<Toast.Header>
<span className="dot bg-info me-2" />
<div className="card-heading text-dark me-auto">Bubbly </div>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body className="text-muted">
Hello, world! This is a toast message.
</Toast.Body>
</Toast>
)
}