Toasts

React Bootstrap 5 Toasts 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.

        
            
          import React, { useRef } from 'react';
          import { MDBToast, MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            const triggerItem = useRef(null);
            const triggerItem2 = useRef(null);
            const triggerItem3 = useRef(null);
            const triggerItem4 = useRef(null);
            const triggerItem5 = useRef(null);
            const triggerItem6 = useRef(null);
            const triggerItem7 = useRef(null);

            return (
              <>
                <MDBBtn className='m-1' ref={triggerItem}>
                  Primary
                </MDBBtn>
                <MDBBtn color='secondary' className='m-1' ref={triggerItem2}>
                  Secondary
                </MDBBtn>
                <MDBBtn color='success' className='m-1' ref={triggerItem3}>
                  Success
                </MDBBtn>
                <MDBBtn color='danger' className='m-1' ref={triggerItem4}>
                  Danger
                </MDBBtn>
                <MDBBtn color='warning' className='m-1' ref={triggerItem5}>
                  Warning
                </MDBBtn>
                <MDBBtn color='light' className='m-1' ref={triggerItem6}>
                  Light
                </MDBBtn>
                <MDBBtn color='dark' className='m-1' ref={triggerItem7}>
                  Dark
                </MDBBtn>
    
                <MDBToast
                  color='primary'
                  autohide
                  position='top-right'
                  delay={2000}
                  appendToBody
                  triggerRef={triggerItem}
                  headerContent={
                    <>
                      <strong className='me-auto'>MDBootstrap</strong>
                      <small>11 mins ago</small>
                    </>
                  }
                  bodyContent='Primary Basic Example'
                />
    
                <MDBToast
                  color='secondary'
                  autohide
                  position='top-right'
                  delay={2000}
                  appendToBody
                  triggerRef={triggerItem2}
                  headerContent={
                    <>
                      <strong className='me-auto'>MDBootstrap</strong>
                      <small>11 mins ago</small>
                    </>
                  }
                  bodyContent='Secondary Basic Example'
                />
    
                <MDBToast
                  color='success'
                  autohide
                  position='top-right'
                  delay={2000}
                  appendToBody
                  triggerRef={triggerItem3}
                  headerContent={
                    <>
                      <strong className='me-auto'>MDBootstrap</strong>
                      <small>11 mins ago</small>
                    </>
                  }
                  bodyContent='Success Basic Example'
                />
    
                <MDBToast
                  color='danger'
                  autohide
                  position='top-right'
                  delay={2000}
                  appendToBody
                  triggerRef={triggerItem4}
                  headerContent={
                    <>
                      <strong className='me-auto'>MDBootstrap</strong>
                      <small>11 mins ago</small>
                    </>
                  }
                  bodyContent='Danger Basic Example'
                />
    
                <MDBToast
                  color='warning'
                  autohide
                  position='top-right'
                  delay={2000}
                  appendToBody
                  triggerRef={triggerItem5}
                  headerContent={
                    <>
                      <strong className='me-auto'>MDBootstrap</strong>
                      <small>11 mins ago</small>
                    </>
                  }
                  bodyContent='Warning Basic Example'
                />
    
                <MDBToast
                  color='light'
                  autohide
                  position='top-right'
                  delay={2000}
                  appendToBody
                  triggerRef={triggerItem6}
                  headerContent={
                    <>
                      <strong className='me-auto'>MDBootstrap</strong>
                      <small>11 mins ago</small>
                    </>
                  }
                  bodyContent='Light Basic Example'
                />
    
                <MDBToast
                  color='dark'
                  autohide
                  position='top-right'
                  delay={2000}
                  appendToBody
                  triggerRef={triggerItem7}
                  headerContent={
                    <>
                      <strong className='me-auto'>MDBootstrap</strong>
                      <small>11 mins ago</small>
                    </>
                  }
                  bodyContent='Dark Basic Example'
                />
              </>
            );
          }

Static example

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

          export default function App() {
            return (
              <MDBContainer>
                <MDBToast
                  show
                  className='mx-auto'
                  headerContent={
                    <>
                      <strong className='me-auto'>MDBootstrap</strong>
                      <small>11 mins ago</small>
                    </>
                  }
                  bodyContent='Static Example'
                />
              </MDBContainer>
            );
          }

Colors

        
            
          import React from 'react';
          import { MDBToast, MDBContainer, MDBRow, MDBCol } from 'mdb-react-ui-kit';

          export default function App() {
            return (
              <MDBContainer>
                <MDBRow className='mb-5'>
                  <MDBCol xl='3' lg='6'>
                    <MDBToast
                      color='info'
                      show
                      className='mx-auto'
                      headerContent={
                        <>
                          <strong className='me-auto'>MDBootstrap</strong>
                          <small>11 mins ago</small>
                        </>
                      }
                      bodyContent='Hello, world! This is a toast message.'
                    />
                  </MDBCol>
                  <MDBCol xl='3' lg='6'>
                    <MDBToast
                      color='warning'
                      show
                      className='mx-auto'
                      headerContent={
                        <>
                          <strong className='me-auto'>MDBootstrap</strong>
                          <small>11 mins ago</small>
                        </>
                      }
                      bodyContent='Hello, world! This is a toast message.'
                    />
                  </MDBCol>
                  <MDBCol xl='3' lg='6'>
                    <MDBToast
                      color='success'
                      show
                      className='mx-auto'
                      headerContent={
                        <>
                          <strong className='me-auto'>MDBootstrap</strong>
                          <small>11 mins ago</small>
                        </>
                      }
                      bodyContent='Hello, world! This is a toast message.'
                    />
                  </MDBCol>
                  <MDBCol xl='3' lg='6'>
                    <MDBToast
                      color='danger'
                      show
                      className='mx-auto'
                      headerContent={
                        <>
                          <strong className='me-auto'>MDBootstrap</strong>
                          <small>11 mins ago</small>
                        </>
                      }
                      bodyContent='Hello, world! This is a toast message.'
                    />
                  </MDBCol>
                </MDBRow>
              </MDBContainer>
            );
          }

Placement

You can set position of every notification using position property.

Select horizontal / vertical alignment

Current position: top-right
        
            
          import React, { useRef } from 'react';
          import { MDBToast, MDBContainer, MDBBtn } from 'mdb-react-ui-kit';

          export default function App() {
            const placementExample = useRef(null);

            return (
              <MDBContainer className='text-center'>
                <MDBBtn ref={placementExample}>Show!</MDBBtn>
                <MDBToast
                  color='info'
                  autohide
                  position='top-right'
                  delay={2000}
                  appendToBody
                  triggerRef={placementExample}
                  headerContent={
                    <>
                      <strong className='me-auto'>MDBootstrap</strong>
                      <small>11 mins ago</small>
                    </>
                  }
                  bodyContent='Placement toast.'
                />
              </MDBContainer>
            );
          }

Offset

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

        
            
          import React, { useRef } from 'react';
          import { MDBToast, MDBBtn } from 'mdb-react-ui-kit';

          export default function App() {
            const triggerOffset = useRef(null);
            
            return (
              <>
                <MDBBtn className='mb-5' ref={triggerOffset}>
                  Show alert with offset!
                </MDBBtn>

                <MDBToast
                  color='info'
                  autohide
                  offset={50}
                  position='top-right'
                  delay={3000}
                  triggerRef={triggerOffset}
                  headerContent={
                    <>
                      <strong className='me-auto'>MDBootstrap</strong>
                      <small>11 mins ago</small>
                    </>
                  }
                  bodyContent='Offset: 50'
                />
              </>
            );
          }

Container

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

        
            
          import React, { useRef } from 'react';
          import { MDBToast, MDBBtn } from 'mdb-react-ui-kit';

          export default function App() {
            const triggerContainer = useRef(null);
            const wrapperRef = useRef(null);
            
            return (
              <div className='container text-center' ref={wrapperRef}>
                <MDBBtn className='mb-5' ref={triggerContainer}>
                  Show alert below!
                </MDBBtn>

                <MDBToast
                  autohide
                  position='top-right'
                  delay={3000}
                  triggerRef={triggerContainer}
                  containerRef={wrapperRef}
                  headerContent={
                    <>
                      <strong className='me-auto'>MDBootstrap</strong>
                      <small>11 mins ago</small>
                    </>
                  }
                  bodyContent='Toast inside another element!'
                />
              </div>
            );
          }

Stacking

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

        
            
          import React, { useState } from 'react';
          import { MDBToast, MDBBtn } from 'mdb-react-ui-kit';

          export default function App() {
            const [stackingToasts, setStackingToasts] = useState<Array<Record<string, any>>>([]);
            const [stackingColor, setStackingColor] = useState(0);
          
            const handleClick = () => {
              const colors = ['primary', 'warning', 'info', 'success', 'secondary', 'danger', 'light'];
          
              stackingColor + 1 > colors.length - 1 ? setStackingColor(0) : setStackingColor(stackingColor + 1);
          
              setStackingToasts([
                ...stackingToasts,
                {
                  color: colors[stackingColor],
                  count: stackingToasts.length > 0 ? stackingToasts.length + 1 : 1,
                },
              ]);
            };
            
            return (
              <>
                <MDBBtn className='m-1' onClick={handleClick}>
                  Show toast notification
                </MDBBtn>

                {
                  stackingToasts.map((item) => (
                    <MDBToast
                      color={item.color}
                      show
                      autohide
                      stacking
                      offset={50}
                      width={450}
                      position='top-right'
                      delay={2000}
                      appendToBody
                      key={item.count}
                      headerContent={
                        <>
                          <strong className='me-auto'>{item.count}</strong>
                          <small>11 mins ago</small>
                        </>
                      }
                      bodyContent='Stacking Element'
                    />
                  ))
                }
              </>
            );
          }

Stacking (container)

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

        
            
          import React, { useState, useRef } from 'react';
          import { MDBToast, MDBBtn } from 'mdb-react-ui-kit';

          export default function App() {
            const [containerToasts, setContainerToasts] = useState<Array<Record<string, any>>>([]);
            const [containerColor, setContainerColor] = useState(0);
          
            const handleContainerClick = () => {
              const colors = ['primary', 'warning', 'info', 'success', 'secondary', 'danger', 'light'];
          
              containerColor + 1 > colors.length - 1 ? setContainerColor(0) : setContainerColor(containerColor + 1);
          
              setContainerToasts([
                ...containerToasts,
                {
                  color: colors[containerColor],
                  count: containerToasts.length > 0 ? containerToasts.length + 1 : 1,
                },
              ]);
            };
            
            const stackingContainer = useRef(null);
            
            return (
              <div className='container text-center' ref={stackingContainer}>
                <MDBBtn className='m-1' onClick={handleContainerClick}>
                  Show toast notification
                </MDBBtn>

                {
                  containerToasts.map((item) => (
                    <MDBToast
                      color={item.color}
                      show
                      autohide
                      stacking
                      offset={50}
                      width={250}
                      position='top-right'
                      delay={2000}
                      containerRef={stackingContainer}
                      key={item.count}
                      headerContent={
                        <>
                          <strong className='me-auto'>{item.count}</strong>
                          <small>11 mins ago</small>
                        </>
                      }
                      bodyContent='Stacking Element'
                    />
                  ))
                }
              </div>
            );
          }

Toasts - API

Import

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

Properties

MDBToast

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

Events

Name Type Description
onHide () => any This event is fired immediately when the hide method has been called.
onShow () => any This event fires immediately when the show instance method is called.