Notifications

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>
  )
}

Your company © 2023

Version 1.3.0