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;