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.


Static examples



Additional Content


Show with trigger

You can manually show alert using triggerRef property with other element.


Placement

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

Select horizontal / vertical alignment

Current position: top-right

Container

You can display an alert anywhere. Just put it in your target element and fill the containerRef property with reference to the parent.


Offset

You can set offset of your alert using a offset property.


Stacking

You can turn on stacking your alerts using the stacking property.


Stacking - Container

You can also stack alerts inside the container

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 Reference '' 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 String '' Allows to set the color of an alert - primary | secondary | secondary | danger | warning | info | light | dark <MDBAlert color='secondary' />
triggerRef Reference '' 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 />