Toasts

React Bootstrap 5 Toast component

Toasts built with Bootstrap 5, React 17 and Material Design 2.0. Non-disruptive notification message in the corner of the interface. It provides quick "at-a-glance" feedback on the outcome of an action.

Push notifications to your visitors with a 'toast', a lightweight and easily customizable alert message. Toasts are designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Note: Read the API tab to find all available options and advanced customization


Basic example

Click the buttons to launch the toasts.


Static example


Colors


Placement

You can set position of every notification using position property.

Select horizontal / vertical alignment

Current position: top-right

Offset

You can also change offset of every notification using offset property.


Container

You can display notification anywhere. Just put your toast in your target element and fill containerRef property with a reference to the parent.


Stacking

You can turn on/off stacking your notifications using stacking property.


Stacking (container)

You can turn on/off stacking your notifications using stacking property.

Toasts - API


Import


        import { MDBToast } from 'mdb-react-ui-kit';
      

Properties

MDBToast

Name Type Default Description Example
className String '' Add custom class to MDBToast <MDBToast className="class" />
bodyClasses String '' Add custom class to the body of MDBToast <MDBToast bodyClasses="class" />
headerClasses String '' Add custom class to the header of MDBToast <MDBToast headerClasses="class" />
closeBtnClasses String '' Add custom class to the close button of MDBToast <MDBToast className="class" />
position 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' '' Sets a toast position <MDBToast position='top-right' />
delay Number 1000 Sets the length of animation delay (in ms) <MDBToast delay={2000} />
autohide Boolean false Toasts will hide automatically or not <MDBToast autohide />
width String '' Sets width of toast (in pixels) <MDBToast width={300} />
containerRef Reference '' Defines a reference to the parent element <MDBToast containerRef={containerReference} />
offset Number 10 Defines offset of the element (in pixels) <MDBToast offset={100} />
appendToBody Boolean false Appends element to the end of the body <MDBToast autohide />
color String '' Allows to set the color of a toast - primary | secondary | secondary | danger | warning | info | light | dark <MDBToast color='secondary' />
triggerRef Reference '' Reference to the element that triggers a toast <MDBToast triggerRef={triggerReference} />
bodyContent String | Node '' Defines a body content for MDBToast <MDBToast bodyContent={
Sample
} />
headerContent String | Node '' Defines a header content for MDBToast <MDBToast headerContent={
Sample
} />
stacking Boolean false Enables toasts stacking <MDBToast stacking />