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> </> ); }

PAY ONCE

USE FOREVER

Hurry up ⌛ claim exclusive long term passes available only during Cyber Weeks

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;