Toasts

React Bootstrap 5 Toasts component

Toasts built with Bootstrap 5, React 18 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, { useState } from 'react';
          import {MDBToast, MDBBtn, MDBStack } from 'mdb-react-ui-kit';
          
          export default function ToastPage(): JSX.Element {
            const showToast = (color: string) => {
              setStackingToasts([
                ...stackingToasts,
                { 
                  color,
                  colorCapitalized: color.charAt(0).toUpperCase() + color.slice(1),
                }
              ]);
            };
            const [stackingToasts, setStackingToasts] = useState<Array<Record<string, any>>>([]);
          
            return (
              <>
                 <MDBBtn className='m-1' onClick={() => showToast('primary')}>
                    Primary
                  </MDBBtn>
                  <MDBBtn color='secondary' className='m-1' onClick={() => showToast('secondary')}>
                    Secondary
                  </MDBBtn>
                  <MDBBtn color='success' className='m-1' onClick={() => showToast('success')}>
                    Success
                  </MDBBtn>
                  <MDBBtn color='danger' className='m-1' onClick={() => showToast('danger')}>
                    Danger
                  </MDBBtn>
                  <MDBBtn color='warning' className='m-1' onClick={() => showToast('warning')}>
                    Warning
                  </MDBBtn>
                  <MDBBtn color='light' className='m-1' onClick={() => showToast('light')}>
                    Light
                  </MDBBtn>
                  <MDBBtn color='dark' className='m-1' onClick={() => showToast('dark')}>
                    Dark
                  </MDBBtn>
          
                  <MDBStack className='position-absolute'>
                    {
                      stackingToasts.map((item, id) => (
                        <MDBToast
                          color={item.color}
                          defaultOpen
                          autohide
                          width={450}
                          delay={2000}
                          key={id}
                          headerContent={
                            <>
                              <strong className='me-auto'>MDBootstrap</strong>
                              <small>11 mins ago</small>
                            </>
                          }
                          bodyContent={`${item.colorCapitalized} Basic Example`}
                        />
                      ))
                    }
                  </MDBStack>
              </>
            );
          }

Static example

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

          export default function App() {
            return (
              <MDBContainer>
                <MDBToast
                  open
                  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'
                      open
                      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'
                      open
                      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'
                      open
                      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'
                      open
                      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, { useState } from 'react';
            import { MDBToast, MDBContainer, MDBBtn } from 'mdb-react-ui-kit';

            export default function App() {
              const [isOpen, setIsOpen] = useState(false);

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

Offset

You can also change offset or any style of a notification using style 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, useState } from 'react';
            import { MDBToast, MDBBtn } from 'mdb-react-ui-kit';

            export default function App() {
              const [isOpen, setIsOpen] = useState(false);
              const wrapperRef = useRef(null);

              return (
                <div className='container text-center w-50 border' ref={wrapperRef}>
                  <MDBBtn className='mb-5' onClick={() => setIsOpen(true)}>
                    Show alert below!
                  </MDBBtn>

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

Stacking

You can create stacking notifications using MDBStack component. 

        
            
          import React, { useState } from 'react';
          import { MDBToast, MDBBtn, MDBStack } 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>

                <MDBStack className='position-absolute'>
                {
                  stackingToasts.map((item) => (
                    <MDBToast
                      color={item.color}
                      defaultOpen
                      autohide
                      width={450}
                      delay={2000}
                      key={item.count}
                      headerContent={
                        <>
                          <strong className='me-auto'>{item.count}</strong>
                          <small>11 mins ago</small>
                        </>
                      }
                      bodyContent='Stacking Element'
                    />
                  ))
                  }
                </MDBStack>

              </>
            );
          }

Stacking (container)

Add position-relative class to your container and wrap notifications with MDBStack component. Stack component must have position-absolute class. 

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

            const colors = ['primary', 'warning', 'info', 'success', 'secondary', 'danger', 'light'];

            export default function App() {
              const [stackToasts, setStackToasts] = useState([]);
              const [counter, setCounter] = useState(1);

              return (
                <>
                  <div
                    className='container text-center position-relative  border w-50'
                    id='parent-stacking-container-example'
                    style={{
                      height: '300px',
                      overflow: 'auto',
                    }}
                  >
                    <MDBStack className='position-absolute'>
                      {stackToasts.map((toast) => {
                        const color = colors[toast.id % colors.length];
                        return (
                          <MDBToast
                            defaultOpen
                            autohide
                            delay={3000}
                            key={toast.id}
                            color={color}
                            dismissBtn
                            width={250}
                            headerContent={
                              <>
                                <strong className='me-auto'>{toast.id}</strong>
                                <small>11 mins ago</small>
                              </>
                            }
                            bodyContent={'Stacking element'}
                          ></MDBToast>
                        );
                      })}
                    </MDBStack>
                    <MDBBtn
                      onClick={() => {
                        setStackToasts([
                          ...stackToasts,
                          {
                            id: counter,
                          },
                        ]);
                        setCounter((prev) => prev + 1);
                      }}
                    >
                      Show toast notification
                    </MDBBtn>
                  </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
} />
position 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' '' Sets a toast position <MDBToast position='top-right' />
open Boolean undefined Defines toast's open state. Usually used with onClose event handler. <MDBToast open />
defaultOpen Boolean false Defines toast's default open state. No onClose handler is needed to close the toast. <MDBToast defaultOpen />
toastRef React.MutableRefObject '' Reference to the MDBToast element <MDBToast toastRef={toastRefference} />
width Number | String '' Sets width of toast (in pixels) <MDBToast width={300} />
initialAnimation boolean false Defines if component should animate on initial render <MDBAlert initialAnimation />
animationVariants { open?: Record<string, any>; closed?: Record<string, any>; }; {open: { opacity: 1 }, closed: { opacity: 0 }} Defines animation variants <MDBAlert animationVariants={ {open: { opacity: 1 }, closed: { opacity: 0 }} } />

Events

onOpen () => void Fired when the Alert starts to open.
onOpened () => void Fired after opening transition has completed.
onClose () => void Fires immediately when the Alert demands to be closed.
onClosed () => void Fired after closing transition has completed.

CSS variables

As part of MDB’s evolving CSS variables approach, toast now use local CSS variables on .toast for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

        
            
        // .toast
        --#{$prefix}toast-zindex: #{$zindex-toast};
        --#{$prefix}toast-padding-x: #{$toast-padding-x};
        --#{$prefix}toast-padding-y: #{$toast-padding-y};
        --#{$prefix}toast-spacing: #{$toast-spacing};
        --#{$prefix}toast-max-width: #{$toast-max-width};
        @include rfs($toast-font-size, --#{$prefix}toast-font-size);
        --#{$prefix}toast-color: #{$toast-color};
        --#{$prefix}toast-bg: #{$toast-background-color};
        --#{$prefix}toast-border-width: #{$toast-border-width};
        --#{$prefix}toast-border-color: #{$toast-border-color};
        --#{$prefix}toast-border-radius: #{$toast-border-radius};
        --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
        --#{$prefix}toast-header-color: #{$toast-header-color};
        --#{$prefix}toast-header-bg: #{$toast-header-background-color};
        --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
         
        --#{$prefix}toast-border-bottom-width: #{$toast-border-bottom-width};
        --#{$prefix}toast-btn-close-width: #{$toast-btn-close-width};
        --#{$prefix}toast-btn-close-mr: #{$toast-btn-close-mr};
        --#{$prefix}toast-btn-close-ml: #{$toast-btn-close-ml};

        // .toast-container
        --#{$prefix}toast-zindex: #{$zindex-toast};

SCSS variables

        
            
        $toast-max-width: 350px;
        $toast-font-size: 0.875rem;
        $toast-color: null;
        $toast-border-width: $border-width;
        $toast-border-color: var(--#{$prefix}border-color-translucent);
        $toast-spacing: $container-padding-x;
        
        $toast-header-color: $gray-600;
        $toast-header-border-color: rgba($black, 0.05);

        $toast-box-shadow: $box-shadow-4;
        $toast-border-radius: $border-radius-lg;
        $toast-border-bottom-width: $border-width-alternate;
        $toast-background-color: $white;
        $toast-padding-x: 1rem;
        $toast-padding-y: 0.65rem;
        $toast-header-background-color: $white;
        $toast-btn-close-width: 1.3em;
        $toast-btn-close-mr: -0.375rem;
        $toast-btn-close-ml: 0.75rem;