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.

Primary Basic Example

Secondary Basic Example

Success Basic Example

Danger Basic Example

Warning Basic Example

Info Basic Example

Light Basic Example

Dark Basic Example

Show code

        
            
          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

Static Example

Show code

        
            
          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

Hello, world! This is a toast message.

Show code

        
            
          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

Toast placement

Show code

        
            
          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.

Offset: 50

Show code

        
            
          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.

Toast inside another element!

Show code

        
            
          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.

Show code

        
            
          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.

Show code

        
            
          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

Show code

javascript

        
            
            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.

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.

Show code

        
            
        // .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

Show code

SCSS

        
            
        $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;

Toasts

React Bootstrap 5 Toasts component

Basic example

Static example

Colors

Placement

Current position: top-right

Offset

Container

Stacking

Stacking (container)

Related resources

Toasts - API

Import

Properties

MDBToast

Events

CSS variables

SCSS variables