Toasts

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

    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.

    Examples

    Basic

    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.

    Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

    Dismissible

    Stacking

    When you have multiple toasts, we default to vertically stacking them in a readable manner.

    Placement

    Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle.

    For systems that generate more notifications, consider using a wrapping element so they can easily stack.

    Autohide

    A Toast can also automatically hide after X milliseconds. For that, use the autohide prop in combination with delay the prop to sepecify the delay. But be aware, that it will only trigger the onClose function, you have to set manually the show property.

    API

    Toastview source file

    import Toast from 'react-bootstrap/Toast'Copy import code for the Toast component
    NameTypeDefaultDescription
    animation
    boolean
    		true

    Apply a CSS fade transition to the toast

    autohide
    boolean
    		false

    Auto hide the toast

    delay
    number
    		3000

    Delay hiding the toast (ms)

    onClose
    function

    A Callback fired when the close button is clicked.

    show
    boolean
    		true

    When true The modal will show itself.

    transition
    elementType
    		<Fade>

    A react-transition-group Transition component used to animate the Toast on dismissal.

    bsPrefix
    string
    		'toast'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    ToastHeaderview source file

    import ToastHeader from 'react-bootstrap/ToastHeader'Copy import code for the ToastHeader component
    NameTypeDefaultDescription
    closeButton
    boolean
    		true

    Specify whether the Component should contain a close button

    closeLabel
    string
    		'Close'

    Provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.

    bsPrefix
    string

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    ToastBodyview source file

    import ToastBody from 'react-bootstrap/ToastBody'Copy import code for the ToastBody component
    NameTypeDefaultDescription
    as
    elementType
    		<div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    		'toast-body'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.