React Bootstrap docs

Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Tiny variant

import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Toast from 'react-bootstrap/Toast'
import ToastBody from 'react-bootstrap/ToastBody'
import Button from 'react-bootstrap/Button'
import CloseButton from 'react-bootstrap/CloseButton'

export default function ToastsTinyDemo() {
  return (
    <Row className="g-4 g-md-5">
      <Col sm={6} xl={5} className="vstack gap-3">
        <Toast className="d-flex">
          <ToastBody className="me-2">Hello, world! This is a toast message.</ToastBody>
          <CloseButton className="ms-auto" />
        </Toast>
        {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map((variant) => (
          <Toast
            key={variant}
            className={`d-flex text-bg-${variant} border-0`}
            data-bs-theme={variant === 'light' ? 'light' : 'dark'}
          >
            <ToastBody className="me-2">Hello, world! This is a toast message.</ToastBody>
            {variant === 'light' ? (
              <Button variant="default" size="sm" className="fs-base opacity-75 border-0 p-0 ms-auto">
                <i className="ci-close"/>
              </Button>
            ) : (
              <CloseButton className="ms-auto" />
            )}
          </Toast>
        ))}
      </Col>
      <Col sm={6} xl={5} className="vstack gap-3">
        {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark'].map((variant) => (
          <Toast key={variant} className={`d-flex border-${variant}`}>
            <ToastBody className="me-2">Hello, world! This is a toast message.</ToastBody>
            <CloseButton className="ms-auto" />
          </Toast>
        ))}
      </Col>
    </Row>
  )
}

Tiny with icon

import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Toast from 'react-bootstrap/Toast'
import ToastBody from 'react-bootstrap/ToastBody'
import Button from 'react-bootstrap/Button'
import CloseButton from 'react-bootstrap/CloseButton'

export default function ToastsTinyWithIconDemo() {
  return (
    <Row className="g-4 g-md-5">
      <Col sm={6} xl={5} className="vstack gap-3">

        {/* Default toast */}
        <Toast className="d-flex">
          <i className="ci-settings fs-base mt-1 me-2"/>
          <ToastBody className="me-2">Hello, world! This is a toast message.</ToastBody>
          <CloseButton className="ms-auto" />
        </Toast>

        {/* Background color variants */}
        {[
          { variant: 'primary', icon: 'bell' },
          { variant: 'secondary', icon: 'clock' },
          { variant: 'success', icon: 'check-circle' },
          { variant: 'danger', icon: 'banned' },
          { variant: 'warning', icon: 'alert-triangle' },
          { variant: 'info', icon: 'info' },
          { variant: 'light', icon: 'unlock' },
          { variant: 'dark', icon: 'map-pin' },
        ].map(({ variant, icon }) => (
          <Toast
            key={variant}
            className={`d-flex text-bg-${variant} border-0`}
            data-bs-theme={variant === 'light' ? 'light' : 'dark'}
          >
            <i className={`ci-${icon} fs-base mt-1 me-2`}/>
            <ToastBody className="me-2">Hello, world! This is a toast message.</ToastBody>
            {variant === 'light' ? (
              <Button variant="default" size="sm" className="fs-base opacity-75 border-0 p-0 ms-auto">
                <i className="ci-close"/>
              </Button>
            ) : (
              <CloseButton className="ms-auto" />
            )}
          </Toast>
        ))}
      </Col>
      <Col sm={6} xl={5} className="vstack gap-3">

        {/* Border color variants */}
        {[
          { variant: 'primary', icon: 'bell' },
          { variant: 'secondary', icon: 'clock' },
          { variant: 'success', icon: 'check-circle' },
          { variant: 'danger', icon: 'banned' },
          { variant: 'warning', icon: 'alert-triangle' },
          { variant: 'info', icon: 'info' },
          { variant: 'dark', icon: 'map-pin' },
        ].map(({ variant, icon }) => (
          <Toast key={variant} className={`d-flex border-${variant}`}>
            <i className={`ci-${icon} fs-base mt-1 me-2`}/>
            <ToastBody className="me-2">Hello, world! This is a toast message.</ToastBody>
            <CloseButton className="ms-auto" />
          </Toast>
        ))}
      </Col>
    </Row>
  )
}

With header and icon

import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Toast from 'react-bootstrap/Toast'
import ToastHeader from 'react-bootstrap/ToastHeader'
import ToastBody from 'react-bootstrap/ToastBody'

export default function ToastsWithHeaderIconDemo() {
  return (
    <Row className="g-4 g-md-5">
      <Col sm={6} xl={5} className="vstack gap-3">
        <Toast>
          <ToastHeader>
            <i className="ci-settings text-body-secondary fs-base me-2"/>
            <span className="fw-semibold me-auto">Default toast</span>
          </ToastHeader>
          <ToastBody className="me-2">Hello, world! This is a toast message.</ToastBody>
        </Toast>
        {[
          { variant: 'primary', icon: 'bell' },
          { variant: 'secondary', icon: 'clock' },
          { variant: 'success', icon: 'check-circle' },
          { variant: 'danger', icon: 'banned' },
        ].map(({ variant, icon }) => (
          <Toast key={variant} className={`border-${variant}`}>
            <ToastHeader>
              <i className={`ci-${icon} text-${variant} fs-base mt-1 me-2`}/>
              <span className="fw-semibold me-auto">
                {variant.charAt(0).toUpperCase() + variant.slice(1).toLowerCase()} toast
              </span>
            </ToastHeader>
            <ToastBody className="me-2">Hello, world! This is a toast message.</ToastBody>
          </Toast>
        ))}
      </Col>
      <Col sm={6} xl={5} className="vstack gap-3">
        {[
          { variant: 'danger', icon: 'banned' },
          { variant: 'warning', icon: 'alert-triangle' },
          { variant: 'info', icon: 'info' },
          { variant: 'dark', icon: 'map-pin' },
        ].map(({ variant, icon }) => (
          <Toast key={variant} className={`border-${variant}`}>
            <ToastHeader>
              <i className={`ci-${icon} text-${variant} fs-base mt-1 me-2`}/>
              <span className="fw-semibold me-auto">
                {variant.charAt(0).toUpperCase() + variant.slice(1).toLowerCase()} toast
              </span>
            </ToastHeader>
            <ToastBody className="me-2">Hello, world! This is a toast message.</ToastBody>
          </Toast>
        ))}
      </Col>
    </Row>
  )
}

Action buttons

import Toast from 'react-bootstrap/Toast'
import ToastHeader from 'react-bootstrap/ToastHeader'
import ToastBody from 'react-bootstrap/ToastBody'
import Button from 'react-bootstrap/Button'

export default function ToastsActionButtonsDemo() {
  return (
    <Toast>
      <ToastHeader closeButton={false}>
        <i className="ci-bell text-primary fs-base mt-1 me-2"/>
        <span className="fw-semibold me-auto">Notification center</span>
        <small className="text-body-secondary">2 seconds ago</small>
      </ToastHeader>
      <ToastBody className="me-2">You have 10 unread messages.</ToastBody>
      <Stack direction="horizontal" gap={2} className="pt-3">
        <Button size="sm">Read all</Button>
        <Button variant="secondary" size="sm">Close</Button>
      </Stack>
    </Toast>
  )
}

Placement

'use client'

import { useState } from 'react'
import FormLabel from 'react-bootstrap/FormLabel'
import FormSelect from 'react-bootstrap/FormSelect'
import Toast from 'react-bootstrap/Toast'
import ToastHeader from 'react-bootstrap/ToastHeader'
import ToastBody from 'react-bootstrap/ToastBody'
import ToastContainer, { type ToastPosition } from 'react-bootstrap/ToastContainer'

export default function ToastsPlacementDemo() {
  const [position, setPosition] = useState<ToastPosition>('top-start')

  return (
    <>
      <div className="mb-3" style={{ maxWidth: 300 }}>
        <FormLabel htmlFor="selectToastPlacement">Toast placement</FormLabel>
        <FormSelect id="selectToastPlacement" onChange={(e) => setPosition(e.currentTarget.value as ToastPosition)}>
          {[
            'top-start',
            'top-center',
            'top-end',
            'middle-start',
            'middle-center',
            'middle-end',
            'bottom-start',
            'bottom-center',
            'bottom-end',
          ].map((position) => (
            <option key={position} value={position}>
              {position.charAt(0).toUpperCase() + position.slice(1).replace('-', ' ')}
            </option>
          ))}
        </FormSelect>
      </div>
      <div
        className="position-relative bg-dotted rounded"
        aria-live="polite"
        aria-atomic="true"
        style={{ height: 240 }}
      >
        <ToastContainer position={position} className="p-3">
          <Toast>
            <ToastHeader closeButton={false}>
              <i className="ci-bell text-primary fs-base mt-1 me-2"/>
              <span className="fw-semibold me-auto">Toast title</span>
              <small className="text-body-secondary">11 mins ago</small>
            </ToastHeader>
            <ToastBody className="me-2">Hello, world! This is a toast message.</ToastBody>
          </Toast>
        </ToastContainer>
      </div>
    </>
  )
}

Live demo

'use client'

import { useState, useEffect } from 'react'
import Button from 'react-bootstrap/Button'
import Toast from 'react-bootstrap/Toast'
import ToastHeader from 'react-bootstrap/ToastHeader'
import ToastBody from 'react-bootstrap/ToastBody'
import ToastContainer from 'react-bootstrap/ToastContainer'

export default function ToastsLiveDemo() {
  const [show, setShow] = useState(false)

  // Automatically hide toast after 6 seconds
  useEffect(() => {
    if (show) {
      const timer = setTimeout(() => setShow(false), 6000)
      return () => clearTimeout(timer)
    }
  }, [show])

  return (
    <>
      <Button onClick={() => setShow(true)}>Show live toast</Button>
      <ToastContainer position="bottom-end" className="position-fixed p-3">
        <Toast className="border-primary" show={show} onClose={() => setShow(false)}>
          <ToastHeader>
            <i className="ci-bell text-primary fs-base me-2"/>
            <span className="fw-semibold me-auto">Toast title</span>
            <small className="text-body-secondary me-2">5 mins ago</small>
          </ToastHeader>
          <ToastBody className="me-2">Hello, world! This is a toast message.</ToastBody>
        </Toast>
      </ToastContainer>
    </>
  )
}
Top