Bootstrap Alerts MDB Pro component

To improve the communication between your website/application and its users, you might want to consider adding some automatic pop-up messages.

With the right use of colors, they add some emotional weight to our information, ranging from a simple warning to critical system failure or from an operation success to a neutral information.

Basic examples MDB Pro component

Info message Warning message Success message Error message
import React, { Component } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import './alerts.css';
import { Button } from 'mdbreact';

class AlertPage extends Component {
  return () => {
    switch (type) {
      case 'info':'Info message', {
          autoClose: 3000
      case 'success':
        toast.success('Success message', {
          position: toast.POSITION.TOP_RIGHT,
      case 'warning':
        toast.warn('Warning message');
      case 'error':
        toast.error('Error message');
    return (
      <button className='btn btn-info'
      <button className='btn btn-success'
      <button className='btn btn-warning'
      <button className='btn btn-danger'
export default AlertPage;


ToastContainer (Type : React Component)

Props Type Default Description
position string top-right One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
autoClose false or int 5000 Delay in ms to close the toast. If set to false, the notification need to be closed manualy
closeButton React Element or false - A React Component to replace the default close button or false to hide the button
transition function - A reference to a valid react-transition-group/Transition component
hideProgressBar bool false Display or not the progress bar below the toast(remaining time)
pauseOnHover bool true Keep the timer running or not on hover
closeOnClick bool true Dismiss toast on click
newestOnTop bool false Display newest toast on top
className string - Add optional classes to the container
style object - Add optional inline style to the container
toastClassName string - Add optional classes to the toast
bodyClassName string - Add optional classes to the toast body
progressClassName string - Add optional classes to the progress bar