Alerts

React Bootstrap 5 Alerts component

Responsive alerts built with Bootstrap 5, React 17 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, { 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

        
            
            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—check it out!
                  </MDBAlert>
                  <MDBAlert show className='w-100' color='secondary'>
                    A simple secondary alert—check it out!
                  </MDBAlert>
                  <MDBAlert show className='w-100' color='success'>
                    A simple success alert—check it out!
                  </MDBAlert>
                  <MDBAlert show className='w-100' color='danger'>
                    A simple danger alert—check it out!
                  </MDBAlert>
                  <MDBAlert show className='w-100' color='warning'>
                    A simple warning alert—check it out!
                  </MDBAlert>
                  <MDBAlert show className='w-100' color='light'>
                    A simple info alert—check it out!
                  </MDBAlert>
                  <MDBAlert show 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 show className='w-100' color='primary'>
                    <i class="fas fa-info-circle me-3"></i>A simple primary alert—check it out!
                  </MDBAlert>
                  <MDBAlert show className='w-100' color='secondary'>
                    <i class="fas fa-circle me-3"></i>A simple secondary alert—check it out!
                  </MDBAlert>
                  <MDBAlert show className='w-100' color='success'>
                    <i class="fas fa-check-circle me-3"></i>A simple success alert—check it out!
                  </MDBAlert>
                  <MDBAlert show className='w-100' color='danger'>
                    <i class="fas fa-times-circle me-3"></i>A simple danger alert—check it out!
                  </MDBAlert>
                  <MDBAlert show className='w-100' color='warning'>
                    <i class="fas fa-exclamation-triangle me-3"></i>A simple warning alert—check it out!
                  </MDBAlert>
                  <MDBAlert show className='w-100' color='info'>
                    <i class="fas fa-chevron-circle-right me-3"></i>A simple info alert—check it out!
                  </MDBAlert>
                  <MDBAlert show className='w-100' color='light'>
                    <i class="fab fa-gratipay me-3"></i>A simple light alert—check it out!
                  </MDBAlert>
                  <MDBAlert show 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 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.

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

Hide

You can manually hide alert using show prop.

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

            export default function App() {
              const [visibility, setVisibility] = useState(true);

              return (
                <MDBContainer className='text-center'>
                  <MDBBtn onClick={() => setVisibility(false)}>Hide me!</MDBBtn>
                  <MDBAlert show={visibility} 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, { 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. 

        
            
            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.

        
            
            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<{}[]>([]);
              const [stackingColor, setStackingColor] = useState(0);

              const colors = ['primary', 'warning', 'info', 'success', 'secondary', 'danger', 'light'];
            
              const handleStackingClick = () => {
                stackingColor + 1 > colors.length - 1 ? setStackingColor(0) : setStackingColor(stackingColor + 1);
            
                const ID = Math.random().toString();
            
                setStackingAlerts([
                  ...stackingAlerts,
                  {
                    color: colors[stackingColor],
                    count: stackingAlerts.length > 0 ? stackingAlerts.length + 1 : 1,
                    visible: true,
                    id: ID,
                  },
                ]);
              };

              const handleCloseStackingClick = (number) => {
                const tempStackingAlerts = [];
                stackingAlerts.forEach((alert) => {
                  if (alert.id === number) {
                    tempStackingAlerts.push({
                      color: alert.color,
                      count: alert.count,
                      visible: false,
                      id: alert.id,
                    });
            
                    return;
                  }
            
                  tempStackingAlerts.push(alert);
                });
            
                setStackingAlerts(tempStackingAlerts);
              };

              return (
                <>
                  <MDBBtn className='m-1' onClick={handleStackingClick}>
                    Show notification
                  </MDBBtn>
                  {stackingAlerts.map((item) => {
                    return (
                      <MDBAlert
                        className='d-flex justify-content-between'
                        color={item.color}
                        stacking
                        autohide
                        width={450}
                        position='bottom-right'
                        offset={10}
                        delay={8000}
                        appendToBody
                        show={item.visible}
                        key={item.id}
                      >
                        <p className='mb-0'>
                          <strong>{item.count}.</strong> Stacking alerts
                        </p>
                        <MDBBtn
                          className='btn-close'
                          noRipple
                          outline
                          color='none'
                          onClick={() => handleCloseStackingClick(item.id)}
                        />
                      </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 [stackingAlertsContainer, setStackingAlertsContainer] = useState<{}[]>([]);
              const [stackingColorContainer, setStackingColorContainer] = useState(0);

              const colors = ['primary', 'warning', 'info', 'success', 'secondary', 'danger', 'light'];
            
              const stackingContainer = useRef(null);

              const handleStackingClickContainer = () => {
                stackingColorContainer + 1 > colors.length - 1
                  ? setStackingColorContainer(0)
                  : setStackingColorContainer(stackingColorContainer + 1);
            
                const ID = Math.random().toString();
            
                setStackingAlertsContainer([
                  ...stackingAlertsContainer,
                  {
                    color: colors[stackingColorContainer],
                    count: stackingAlertsContainer.length > 0 ? stackingAlertsContainer.length + 1 : 1,
                    visible: true,
                    id: ID,
                  },
                ]);
              };

              const handleCloseStackingContainerClick = (number) => {
                const tempStackingContainerAlerts = [];
                stackingAlertsContainer.forEach((alert) => {
                  if (alert.id === number) {
                    tempStackingContainerAlerts.push({
                      color: alert.color,
                      count: alert.count,
                      visible: false,
                      id: alert.id,
                    });
            
                    return;
                  }
            
                  tempStackingContainerAlerts.push(alert);
                });
            
                setStackingAlertsContainer(tempStackingContainerAlerts);
              };

              return (
                <div className='container text-center' ref={stackingContainer}>
                  <MDBBtn className='m-1' onClick={handleStackingClickContainer}>
                    Show notification
                  </MDBBtn>
    
                  {stackingAlertsContainer.map((item) => (
                    <MDBAlert
                      className='d-flex justify-content-between'
                      color={item.color}
                      stacking
                      offset={10}
                      autohide
                      width={250}
                      position='top-right'
                      delay={2000}
                      show={item.visible}
                      containerRef={stackingContainer}
                      key={item.id}
                    >
                      <p className='mb-0'>
                        <strong>{item.count}.</strong> Stacking alerts
                      </p>
                      <MDBBtn
                        className='btn-close'
                        noRipple
                        outline
                        color='none'
                        onClick={() => handleCloseStackingContainerClick(item.id)}
                      />
                    </MDBAlert>
                  ))}
                </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} />
offset Number 10 Defines offset of the element (in pixels) <MDBAlert offset={100} />
position 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' '' Sets an alert position <MDBAlert position='top-right' />
show Boolean false Defines if alert is shown by default or not <MDBAlert show />
stacking Boolean false Enables alerts stacking <MDBAlert stacking />
triggerRef React.MutableRefObject null Reference to the element that triggers an alert <MDBAlert triggerRef={triggerReference} />
width Number | String '' Sets width of alert (in pixels) <MDBAlert width={300} />

Events

Name Type Description
onShow () => any Callback fired when the component requests to be shown.
onClose () => any Fires immediately when the onClose instance method is called.
onClosed () => any Fired when the alert has been closed and CSS transitions have 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;