Alerts

React Bootstrap 5 Alerts component

Responsive alerts built with Bootstrap 5, React 18 and Material Design 2.0. 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.

import React, { useState } from 'react';
import { MDBBtn, MDBAlert } from 'mdb-react-ui-kit';

export default function App() {
  const [basicPrimary, setBasicPrimary] = useState(false);
  const [basicSecondary, setBasicSecondary] = useState(false);
  const [basicSuccess, setBasicSuccess] = useState(false);
  const [basicDanger, setBasicDanger] = useState(false);
  const [basicWarning, setBasicWarning] = useState(false);
  const [basicLight, setBasicLight] = useState(false);
  const [basicDark, setBasicDark] = useState(false);

  return (
    <>
      <MDBBtn className='m-1' onClick={() => setBasicPrimary((prev) => !prev)}>
        Primary
      </MDBBtn>
      <MDBBtn color='secondary' className='m-1' onClick={() => setBasicSecondary((prev) => !prev)}>
        Secondary
      </MDBBtn>
      <MDBBtn color='success' className='m-1' onClick={() => setBasicSuccess((prev) => !prev)}>
        Success
      </MDBBtn>
      <MDBBtn color='danger' className='m-1' onClick={() => setBasicDanger((prev) => !prev)}>
        Danger
      </MDBBtn>
      <MDBBtn color='warning' className='m-1' onClick={() => setBasicWarning((prev) => !prev)}>
        Warning
      </MDBBtn>
      <MDBBtn color='light' className='m-1' onClick={() => setBasicLight((prev) => !prev)}>
        Light
      </MDBBtn>
      <MDBBtn color='dark' className='m-1' onClick={() => setBasicDark((prev) => !prev)}>
        Dark
      </MDBBtn>

      <MDBAlert
        color='primary'
        autohide
        position='top-right'
        delay={2000}
        appendToBody
        open={basicPrimary}
        onClose={() => setBasicPrimary(false)}
      >
        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
        position='top-right'
        delay={2000}
        appendToBody
        open={basicSecondary}
        onClose={() => setBasicSecondary(false)}
      >
        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
        position='top-right'
        delay={2000}
        appendToBody
        open={basicSuccess}
        onClose={() => setBasicSuccess(false)}
      >
        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
        position='top-right'
        delay={2000}
        appendToBody
        open={basicDanger}
        onClose={() => setBasicDanger(false)}
      >
        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
        position='top-right'
        delay={2000}
        appendToBody
        open={basicWarning}
        onClose={() => setBasicWarning(false)}
      >
        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
        position='top-right'
        delay={2000}
        appendToBody
        open={basicLight}
        onClose={() => setBasicLight(false)}
      >
        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
        position='top-right'
        delay={2000}
        appendToBody
        open={basicDark}
        onClose={() => setBasicDark(false)}
      >
        A simple dark alert with{' '}
        <a href='#' className='alert-link'>
          an example link
        </a>
        . Give it a click if you like.
      </MDBAlert>
    </>
  );
}

Static examples

import React from 'react';
import { MDBContainer, MDBAlert } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBContainer>
      <MDBAlert open className='w-100' color='primary'>
        A simple primary alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='secondary'>
        A simple secondary alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='success'>
        A simple success alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='danger'>
        A simple danger alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='warning'>
        A simple warning alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='light'>
        A simple info alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='dark'>
        A simple dark alert—check it out!
      </MDBAlert>
    </MDBContainer>
  );
}

Icons

Use Font Awesome Icons to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles. 

import React from 'react';
import { MDBContainer, MDBAlert } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBContainer>
      <MDBAlert open className='w-100' color='primary'>
        <i class="fas fa-info-circle me-3"></i>A simple primary alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='secondary'>
        <i class="fas fa-circle me-3"></i>A simple secondary alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='success'>
        <i class="fas fa-check-circle me-3"></i>A simple success alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='danger'>
        <i class="fas fa-times-circle me-3"></i>A simple danger alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='warning'>
        <i class="fas fa-exclamation-triangle me-3"></i>A simple warning alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='info'>
        <i class="fas fa-chevron-circle-right me-3"></i>A simple info alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='light'>
        <i class="fab fa-gratipay me-3"></i>A simple light alert—check it out!
      </MDBAlert>
      <MDBAlert open className='w-100' color='dark'>
        <i class="fas fa-gem me-3"></i>A simple dark alert—check it out!
      </MDBAlert>
    </MDBContainer>
  );
}

Additional Content

import React from 'react';
import { MDBAlert } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBAlert open 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 by changing value of the open prop. 

import React, { useState } from 'react';
import { MDBAlert, 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 alert!</MDBBtn>
      <MDBAlert open={isOpen} className='mt-3 w-100' color='primary'>
        Hidden alert!
      </MDBAlert>
    </MDBContainer>
  );
}

Hide

You can also manually hide alert using the open prop.

import React, { useState } from 'react';
import { MDBAlert, MDBContainer, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <MDBContainer className='text-center'>
      <MDBBtn onClick={() => setIsOpen(false)}>Show alert!</MDBBtn>
      <MDBAlert open={isOpen} className='mt-3 w-100' color='primary'>
        Hide me!
      </MDBAlert>
    </MDBContainer>
  );
}

Placement

You can set the position of every alert using the position property.

Select horizontal / vertical alignment

Current position: top-right
import React, { useState } from 'react';
import { MDBAlert, MDBContainer, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  const [placementExample, setPlacementExample] = useState(false);
  const [position, setPosition] = useState('top-right');

  return (
    <MDBContainer className='text-center'>
      <MDBBtn onClick={() => setPlacementExample(true)}>Show!</MDBBtn>
      <MDBAlert open={placementExample} color='primary' autohide position={position} delay={2000} appendToBody>
        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. 

import React, { useState, useRef } from 'react';
import { MDBAlert, 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 mx-auto border' ref={wrapperRef}>
      <MDBBtn className='mb-5' onClick={() => setIsOpen(true)}>
        Show alert below!
      </MDBBtn>

      <MDBAlert
        color='primary'
        autohide
        position='top-right'
        delay={3000}
        open={isOpen}
        containerRef={wrapperRef}
      >
        Alert in the container
      </MDBAlert>
    </div>
  );
}

Offset

You can set offset or any other styling using the style property. 

import React, { useState } from 'react';
import { MDBAlert, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <MDBBtn className='mb-5' onClick={() => setIsOpen(!isOpen)}>
        Show alert with offset!
      </MDBBtn>

      <MDBAlert
        color='primary'
        autohide
        position='top-right'
        delay={3000}
        open={isOpen}
        onClose={() => setIsOpen(false)}
        style={{
          top: '100px',
          right: '100px',
        }}
      >
        Offset: 100px
      </MDBAlert>
    </>
  );
}

Stacking

You can create stacking notifications using MDBStack component. 

import React, { useState } from 'react';
import { MDBAlert, MDBBtn, MDBStack } from 'mdb-react-ui-kit';

const colors = ['primary', 'warning', 'info', 'success', 'secondary', 'danger', 'light'];

export default function App() {
  const [stackAlerts, setStackAlerts] = useState([]);
  const [counter, setCounter] = useState(1);

  return (
    <>
      <MDBStack position={'bottom-right'}>
        {stackAlerts.map((alert) => {
          const color = colors[alert.id % colors.length];
          return (
            <MDBAlert defaultOpen autohide delay={3000} key={alert.id} color={color} dismissBtn width={450}>
              {alert.text}
            </MDBAlert>
          );
        })}
      </MDBStack>
      <MDBBtn
        onClick={() => {
          setStackAlerts([
            ...stackAlerts,
            {
              text: (
                <>
                  <b>{counter}.</b> Stacking alert.
                </>
              ),
              id: counter,
            },
          ]);
          setCounter((prev) => prev + 1);
        }}
      >
        Add alert
      </MDBBtn>
    </>
  );
}

Stacking - Container

You can also stack alerts inside the container

import React, { useState } from 'react';
import { MDBAlert, MDBBtn, MDBStack } from 'mdb-react-ui-kit';

const colors = ['primary', 'warning', 'info', 'success', 'secondary', 'danger', 'light'];

export default function App() {
  const [stackAlerts, setStackAlerts] = useState([]);
  const [counter, setCounter] = useState(1);

  return (
    <>
      <div
        className='container text-center parent-alert-relative position-relative'
        id='parent-stacking-container-example'
        style={{
          height: '300px',
          overflow: 'auto',
        }}
      >
      <MDBStack className="position-absolute">
        {stackAlerts.map((alert) => {
          const color = colors[alert.id % colors.length];
          return (
            <MDBAlert defaultOpen autohide delay={3000} key={alert.id} color={color} dismissBtn width={450}>
              {alert.text}
            </MDBAlert>
          );
        })}
      </MDBStack>
      <MDBBtn
        onClick={() => {
          setStackAlerts([
            ...stackAlerts,
            {
              text: (
                <>
                  <b>{counter}.</b> Stacking alert.
                </>
              ),
              id: counter,
            },
          ]);
          setCounter((prev) => prev + 1);
        }}
      >
        Add alert
      </MDBBtn>
      </div>
    </>
  );
}

Alerts - API

Import

import { MDBAlert } from 'mdb-react-ui-kit';

Properties

MDBAlert

Name Type Default Description Example
alertRef Reference '' Reference to the alert element <MDBAlert alertRef={alertReference} />
appendToBody Boolean false Appends element to the end of the body <MDBAlert appendToBody />
autohide Boolean false Alerts will hide automatically or not <MDBAlert autohide />
color String '' Allows to set the color of an alert - primary | secondary | secondary | danger | warning | info | light | dark <MDBAlert color='secondary' />
containerRef React.MutableRefObject null Defines a reference to the parent element <MDBAlert containerRef={containerReference} />
delay Number 1000 Sets the length of animation delay (in ms) <MDBAlert delay={2000} />
position 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' '' Sets an alert position <MDBAlert position='top-right' />
open Boolean undefined Defines alert's open state. Usually used with onClose event handler. <MDBAlert open />
defaultOpen Boolean false Defines alert's default open state. No onClose handler is needed to close the alert. <MDBAlert defaultOpen />
width Number | String '' Sets width of alert (in pixels) <MDBAlert 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

Name Type Description
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, alerts now uses local CSS variables on .alert for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

// .alert
--#{$prefix}alert-bg: transparent;
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-color: inherit;
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};

// .alert-fixed
--#{$prefix}alert-fixed-z-index: #{$zindex-alert};

SCSS variables

$alert-zindex: 1070;

$alert-padding-y: 1.25rem;
$alert-padding-x: 1.5rem;
$alert-margin-bottom: 1rem;
$alert-border-radius: $border-radius-lg;
$alert-link-font-weight: $font-weight-bold;
$alert-border-width: $border-width;
$alert-bg-scale: -80%;
$alert-border-scale: -70%;
$alert-color-scale: 40%;
$alert-dismissible-padding-r: $alert-padding-x * 3;