Alerts
React Bootstrap 5 Alerts component
Responsive alerts built with Bootstrap 5, React 17 and Material Design. Examples of alerts popup such as warning, error or confirmation messages boxes.
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Note: Read the API tab to find all available options and advanced customization
Basic examples
Click the buttons to launch the alerts.
A simple primary alert with
an example link. Give it a click if you like.
A simple secondary alert with
an example link. Give it a click if you like.
A simple success alert with
an example link. Give it a click if you like.
A simple danger alert with
an example link. Give it a click if you like.
A simple warning alert with
an example link. Give it a click if you like.
A simple info alert with
an example link. Give it a click if you like.
A simple light alert with
an example link. Give it a click if you like.
A simple dark alert with
an example link. Give it a click if you like.
import React, { useRef } from 'react';
import { MDBBtn, MDBAlert } 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>
<MDBAlert
color='primary'
autohide
width={800}
position='top-right'
offset={50}
delay={2000}
appendToBody
triggerRef={triggerItem}
>
A simple primary alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert
color='secondary'
autohide
width={800}
position='top-right'
offset={50}
delay={2000}
appendToBody
triggerRef={triggerItem2}
>
A simple secondary alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert
color='success'
autohide
width={800}
position='top-right'
offset={50}
delay={2000}
appendToBody
triggerRef={triggerItem3}
>
A simple success alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert
color='danger'
autohide
width={800}
position='top-right'
offset={50}
delay={2000}
appendToBody
triggerRef={triggerItem4}
>
A simple danger alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert
color='warning'
autohide
width={800}
position='top-right'
offset={50}
delay={2000}
appendToBody
triggerRef={triggerItem5}
>
A simple warning alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert
color='light'
autohide
width={800}
position='top-right'
offset={50}
delay={2000}
appendToBody
triggerRef={triggerItem6}
>
A simple light alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert
color='dark'
autohide
width={800}
position='top-right'
offset={50}
delay={2000}
appendToBody
triggerRef={triggerItem7}
>
A simple dark alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
</>
);
}
Static examples
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
import React from 'react';
import { MDBContainer, MDBAlert } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBContainer>
<MDBAlert show className='w-100' color='primary'>
A simple primary alert with an example link . Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='secondary'>
A simple secondary alert with an example link . Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='success'>
A simple success alert with an example link . Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='danger'>
A simple danger alert with an example link . Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='warning'>
A simple warning alert with an example link . Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='light'>
A simple light alert with an example link . Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='dark'>
A simple dark alert with an example link . Give it a click if you like.
</MDBAlert>
</MDBContainer>
);
}
Link Color
A simple primary alert with
an example link. Give it a click if you like.
A simple secondary alert with
an example link. Give it a click if you like.
A simple success alert with
an example link. Give it a click if you like.
A simple danger alert with
an example link. Give it a click if you like.
A simple warning alert with
an example link. Give it a click if you like.
A simple info alert with an example link. Give it a
click if you like.
A simple light alert with
an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a
click if you like.
import React from 'react';
import { MDBContainer, MDBAlert } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBContainer>
<MDBAlert show className='w-100' color='primary'>
A simple primary alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='secondary'>
A simple secondary alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='success'>
A simple success alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='danger'>
A simple danger alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='warning'>
A simple warning alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='light'>
A simple light alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
<MDBAlert show className='w-100' color='dark'>
A simple dark alert with
<a href='#' className='alert-link'>
{' '}
an example link
</a>
. Give it a click if you like.
</MDBAlert>
</MDBContainer>
);
}
Additional Content
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
import React from 'react';
import { MDBAlert } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBAlert show className='w-100' color='success'>
<h4 className='alert-heading'>Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message. This example text is going to run a bit
longer so that you can see how spacing within an alert works with this kind of content.
</p>
<hr />
<p className='mb-0'>
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</MDBAlert>
);
}
Show with trigger
You can manually show alert using triggerRef property with other element.
Hidden alert!
import React, { useRef } from 'react';
import { MDBAlert, MDBContainer, MDBBtn } from 'mdb-react-ui-kit';
export default function App() {
const triggerRef = useRef(null);
return (
<MDBContainer className='text-center'>
<MDBBtn ref={triggerRef}>Show alert!</MDBBtn>
<MDBAlert triggerRef={triggerRef} className='mt-3 w-100' color='primary'>
Hidden alert!
</MDBAlert>
</MDBContainer>
);
}
Placement
You can set the position of every alert using the
position property.
Select horizontal / vertical alignment
Current position: top-right
Show me wherever you want!
import React, { useRef } from 'react';
import { MDBAlert, 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>
<MDBAlert
color='primary'
autohide
position='top-right'
delay={2000}
appendToBody
triggerRef={placementExample}
>
Show me wherever you want!
</MDBAlert>
</MDBContainer>
);
}
Container
You can display an alert anywhere. Just put it in your target element and fill the
containerRef property with reference to the parent.
Hello from parent element!
import React, { useRef } from 'react';
import { MDBAlert, 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>
<MDBAlert
color='primary'
autohide
position='top-right'
delay={3000}
triggerRef={triggerContainer}
containerRef={wrapperRef}
>
Hello from parent element!
</MDBAlert>
</div>
);
}
Offset
You can set offset of your alert using a offset property.
Offset: 100px
import React, { useRef } from 'react';
import { MDBAlert, 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>
<MDBAlert
color='primary'
autohide
offset={100}
position='top-right'
delay={3000}
triggerRef={triggerOffset}
>
Offset: 100px
</MDBAlert>
</>
);
}
Stacking
You can turn on stacking your alerts using the
stacking property.
import React, { useState } from 'react';
import { MDBAlert, MDBBtn } from 'mdb-react-ui-kit';
export default function App() {
const [stackingAlerts, setStackingAlerts] = 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);
setStackingAlerts([
...stackingAlerts,
{
color: colors[stackingColor],
count: stackingAlerts.length > 0 ? stackingAlerts.length + 1 : 1,
},
]);
};
return (
<>
<MDBBtn className='m-1' onClick={handleClick}>
Show notification
</MDBBtn>
{stackingAlerts.map((item) => (
<MDBAlert
color={item.color}
stacking
autohide
width={450}
position='bottom-right'
offset={50}
delay={2000}
appendToBody
show
key={item.count}
>
<p className='mb-0'>
<strong>{item.count}.</strong> Stacking alerts
</p>
</MDBAlert>
))}
</>
);
}
Stacking - Container
You can also stack alerts inside the container
import React, { useState, useRef } from 'react';
import { MDBAlert, MDBBtn } from 'mdb-react-ui-kit';
export default function App() {
const [containerAlerts, setContainerAlerts] = 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);
setContainerAlerts([
...containerAlerts,
{
color: colors[containerColor],
count: containerAlerts.length > 0 ? containerAlerts.length + 1 : 1,
},
]);
};
const stackingContainer = useRef(null);
return (
<div className='container text-center' ref={stackingContainer}>
<MDBBtn className='m-1' onClick={handleContainerClick}>
Show notification
</MDBBtn>
{containerAlerts.map((item) => (
<MDBAlert
color={item.color}
stacking
offset={30}
autohide
width={250}
position='top-right'
delay={2000}
show
containerRef={stackingContainer}
key={item.count}
>
<p className='mb-0'>
<strong>{item.count}.</strong> Stacking alerts
</p>
</MDBAlert>
))}
</div>
);
}
Alerts - API
Import
import { MDBAlert } from 'mdb-react-ui-kit';
Properties
MDBAlert
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className
|
string | '' |
Add custom class to MDBAlert |
<MDBAlert className="class" />
|
alertRef
|
Reference | '' |
Reference to the alert element |
<MDBAlert alertRef={alertReference} />
|
position
|
'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | '' |
Sets an alert position |
<MDBAlert position='top-right' />
|
delay
|
number | 1000 |
Sets the length of animation delay (in ms) |
<MDBAlert delay={2000} />
|
autohide
|
boolean | false |
Alerts will hide automatically or not |
<MDBAlert autohide />
|
width
|
string | '' |
Sets width of alert (in pixels) |
<MDBAlert width={300} />
|
containerRef
|
React.MutableRefObject |
null |
Defines a reference to the parent element |
<MDBAlert containerRef={containerReference} />
|
offset
|
number | 10 |
Defines offset of the element (in pixels) |
<MDBAlert offset={100} />
|
appendToBody
|
boolean | false |
Appends element to the end of the body |
<MDBAlert autohide />
|
color
|
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'light' | 'dark' | 'info' | '' |
Allows to set the color of an alert - primary | secondary | secondary | danger | warning | info | light | dark |
<MDBAlert color='secondary' />
|
triggerRef
|
React.MutableRefObject |
null |
Reference to the element that triggers an alert |
<MDBAlert triggerRef={triggerReference} />
|
show
|
boolean | false |
Defines if alert is shown by default or not |
<MDBAlert show />
|
stacking
|
boolean | false |
Enables alerts stacking |
<MDBAlert stacking />
|