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.

    Press esc to disable tab trapping

    Dismissible

    Press esc to disable tab trapping

    Stacking

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

    Press esc to disable tab trapping

    Placement

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

    Press esc to disable tab trapping

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

    Press esc to disable tab trapping

    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.

    Press esc to disable tab trapping

    API

    import Toast from 'react-bootstrap/Toast'
    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)

    innerRef
    any
    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.

    import ToastHeader from 'react-bootstrap/ToastHeader'
    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.

    import ToastBody from 'react-bootstrap/ToastBody'
    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.