Popup
React Bootstrap 5 Popups
Responsive React Popup built with Bootstrap 5. Examples include modal popup, popup box, notification message popup, alert popup, lightbox popup & popup form.
Modal popups
Click the button to launch the popup. If you are looking for more popups like this check out our main Modal docs.
import React, { useState } from "react";
import {
MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from "mdb-react-ui-kit";
export default function Modal() {
const [basicModal, setBasicModal] = useState(false);
const toggleShow = () => setBasicModal(!basicModal);
return (
<>
<MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
<MDBModal show={basicModal} setShow={setBasicModal} tabIndex="-1">
<MDBModalDialog>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Modal title</MDBModalTitle>
<MDBBtn
className="btn-close"
color="none"
onClick={toggleShow}
></MDBBtn>
</MDBModalHeader>
<MDBModalBody>...</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={toggleShow}>
Close
</MDBBtn>
<MDBBtn>Save changes</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Alert popups
Click the buttons to launch the alert popups. If you are looking for more popups like these check out our main Alerts docs.
Note: This component requires MDBootstrap Pro package.
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>
</>
);
}
Notification message popups
Click the buttons to launch the notification message popups. If you are looking for more popups like these check out our main Toasts docs.
Note: This component requires MDBootstrap Pro package.
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'
/>
</>
);
}
Lightbox gallery popup
Click the images to display a popup with image zoom. If you are looking for more popups like these check out our main Lightbox docs.
Note: This component requires MDBootstrap Pro package.
import React from 'react';
import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBLightbox>
<MDBRow>
<MDBCol lg='4'>
<MDBLightboxItem
src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp'
fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.webp'
className='w-100'
/>
</MDBCol>
<MDBCol lg='4'>
<MDBLightboxItem
src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp'
fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/2.webp'
className='w-100'
/>
</MDBCol>
<MDBCol lg='4'>
<MDBLightboxItem
src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp'
fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/3.webp'
className='w-100'
/>
</MDBCol>
</MDBRow>
</MDBLightbox>
);
}