Toasts
React Bootstrap 5 Toasts component
Toasts built with Bootstrap 5, React 17 and Material Design. 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.
MDBootstrap
11 mins ago
Primary Basic Example
MDBootstrap
11 mins ago
Secondary Basic Example
MDBootstrap
11 mins ago
Success Basic Example
MDBootstrap
11 mins ago
Danger Basic Example
MDBootstrap
11 mins ago
Warning Basic Example
MDBootstrap
11 mins ago
Info Basic Example
MDBootstrap
11 mins ago
Light Basic Example
MDBootstrap
11 mins ago
Dark Basic Example
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
MDBootstrap
11 mins ago
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
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
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
MDBootstrap
11 mins ago
Toast placement
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.
MDBootstrap
11 mins ago
Offset: 50
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.
MDBootstrap
11 mins ago
Toast inside another element!
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 |
|---|---|---|---|---|
className
|
String | '' |
Add custom class to MDBToast |
<MDBToast className="class" />
|
bodyClasses
|
String | '' |
Add custom class to the body of MDBToast |
<MDBToast bodyClasses="class" />
|
headerClasses
|
String | '' |
Add custom class to the header of MDBToast |
<MDBToast headerClasses="class" />
|
closeBtnClasses
|
String | '' |
Add custom class to the close button of MDBToast |
<MDBToast className="class" />
|
position
|
'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | '' |
Sets a toast position |
<MDBToast position='top-right' />
|
delay
|
Number | 1000 |
Sets the length of animation delay (in ms) |
<MDBToast delay={2000} />
|
autohide
|
Boolean | false |
Toasts will hide automatically or not |
<MDBToast autohide />
|
width
|
String | '' |
Sets width of toast (in pixels) |
<MDBToast width={300} />
|
containerRef
|
Reference | '' |
Defines a reference to the parent element |
<MDBToast containerRef={containerReference} />
|
offset
|
Number | 10 |
Defines offset of the element (in pixels) |
<MDBToast offset={100} />
|
appendToBody
|
Boolean | false |
Appends element to the end of the body |
<MDBToast autohide />
|
color
|
String | '' |
Allows to set the color of a toast - primary | secondary | secondary | danger | warning | info | light | dark |
<MDBToast color='secondary' />
|
triggerRef
|
Reference | '' |
Reference to the element that triggers a toast |
<MDBToast triggerRef={triggerReference} />
|
bodyContent
|
String | Node | '' |
Defines a body content for MDBToast |
<MDBToast bodyContent={
|
headerContent
|
String | Node | '' |
Defines a header content for MDBToast |
<MDBToast headerContent={
|
stacking
|
Boolean | false |
Enables toasts stacking |
<MDBToast stacking />
|