Reactstrap Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible Bootstrap alerts.

Examples

Default! This is a default alert—check it out!

Primary! This is a primary alert—check it out!

Secondary! This is a secondary alert—check it out!

Info! This is a info alert—check it out!

Success! This is a success alert—check it out!

Danger! This is a danger alert—check it out!

Warning! This is a warning alert—check it out!

import React from "react";

// reactstrap components
import { Alert } from "reactstrap";

// Core Components


function Example() {
  return (
    <>
      
      <Alert color="default">
        <strong>Default!</strong> This is a default alert—check it out!
      </Alert>
      
      <Alert color="primary">
        <strong>Primary!</strong> This is a primary alert—check it out!
      </Alert>
      
      <Alert color="secondary">
        <strong>Secondary!</strong> This is a secondary alert—check it out!
      </Alert>
      
      <Alert color="info">
        <strong>Info!</strong> This is a info alert—check it out!
      </Alert>
      
      <Alert color="success">
        <strong>Success!</strong> This is a success alert—check it out!
      </Alert>
      
      <Alert color="danger">
        <strong>Danger!</strong> This is a danger alert—check it out!
      </Alert>
      
      <Alert color="warning">
        <strong>Warning!</strong> This is a warning alert—check it out!
      </Alert>
      
    </>
  );
}

export default Example;

With icon

Warning! This is a warning alert—check it out that has an icon too!

import React from "react";

// reactstrap components
import { Alert } from "reactstrap";

// Core Components


function Example() {
  return (
    <>
      <Alert color="warning">
        <span className="alert-icon"><i class="ni ni-like-2"></i></span>
        <span className="alert-text"><strong>Warning!</strong> This is a warning alert—check it out that has an icon too!</span>
      </Alert>
    </>
  );
}

export default Example;

Dismissing

Controlled

Default! This is a default alert—check it out!

Primary! This is a primary alert—check it out!

Secondary! This is a secondary alert—check it out!

Info! This is a info alert—check it out!

Success! This is a success alert—check it out!

Danger! This is a danger alert—check it out!

Warning! This is a warning alert—check it out!

import React from "react";

// reactstrap components
import { Alert } from "reactstrap";

// Core Components


function Example() {
  
  const [defaultAlert, setDefaultAlert] = React.useState();
  
  const [primaryAlert, setPrimaryAlert] = React.useState();
  
  const [secondaryAlert, setSecondaryAlert] = React.useState();
  
  const [infoAlert, setInfoAlert] = React.useState();
  
  const [successAlert, setSuccessAlert] = React.useState();
  
  const [dangerAlert, setDangerAlert] = React.useState();
  
  const [warningAlert, setWarningAlert] = React.useState();
  
  return (
    <>
      
      <Alert color="default" isOpen={ defaultAlert }>
          <span className="alert-icon">
            <i className="ni ni-like-2"></i>
          </span>
          <span className="alert-text">
            <strong>Default!</strong>{" "}
            This is a default alert—check it out!
          </span>
          <button
            type="button"
            className="close"
            data-dismiss="alert"
            aria-label="Close"
            onClick={() => {setDefaultAlert(false)}}
          >
              <span aria-hidden="true">&times;</span>
          </button>
      </Alert>
      
      <Alert color="primary" isOpen={ primaryAlert }>
          <span className="alert-icon">
            <i className="ni ni-like-2"></i>
          </span>
          <span className="alert-text">
            <strong>Primary!</strong>{" "}
            This is a primary alert—check it out!
          </span>
          <button
            type="button"
            className="close"
            data-dismiss="alert"
            aria-label="Close"
            onClick={() => {setPrimaryAlert(false)}}
          >
              <span aria-hidden="true">&times;</span>
          </button>
      </Alert>
      
      <Alert color="secondary" isOpen={ secondaryAlert }>
          <span className="alert-icon">
            <i className="ni ni-like-2"></i>
          </span>
          <span className="alert-text">
            <strong>Secondary!</strong>{" "}
            This is a secondary alert—check it out!
          </span>
          <button
            type="button"
            className="close"
            data-dismiss="alert"
            aria-label="Close"
            onClick={() => {setSecondaryAlert(false)}}
          >
              <span aria-hidden="true">&times;</span>
          </button>
      </Alert>
      
      <Alert color="info" isOpen={ infoAlert }>
          <span className="alert-icon">
            <i className="ni ni-like-2"></i>
          </span>
          <span className="alert-text">
            <strong>Info!</strong>{" "}
            This is a info alert—check it out!
          </span>
          <button
            type="button"
            className="close"
            data-dismiss="alert"
            aria-label="Close"
            onClick={() => {setInfoAlert(false)}}
          >
              <span aria-hidden="true">&times;</span>
          </button>
      </Alert>
      
      <Alert color="success" isOpen={ successAlert }>
          <span className="alert-icon">
            <i className="ni ni-like-2"></i>
          </span>
          <span className="alert-text">
            <strong>Success!</strong>{" "}
            This is a success alert—check it out!
          </span>
          <button
            type="button"
            className="close"
            data-dismiss="alert"
            aria-label="Close"
            onClick={() => {setSuccessAlert(false)}}
          >
              <span aria-hidden="true">&times;</span>
          </button>
      </Alert>
      
      <Alert color="danger" isOpen={ dangerAlert }>
          <span className="alert-icon">
            <i className="ni ni-like-2"></i>
          </span>
          <span className="alert-text">
            <strong>Danger!</strong>{" "}
            This is a danger alert—check it out!
          </span>
          <button
            type="button"
            className="close"
            data-dismiss="alert"
            aria-label="Close"
            onClick={() => {setDangerAlert(false)}}
          >
              <span aria-hidden="true">&times;</span>
          </button>
      </Alert>
      
      <Alert color="warning" isOpen={ warningAlert }>
          <span className="alert-icon">
            <i className="ni ni-like-2"></i>
          </span>
          <span className="alert-text">
            <strong>Warning!</strong>{" "}
            This is a warning alert—check it out!
          </span>
          <button
            type="button"
            className="close"
            data-dismiss="alert"
            aria-label="Close"
            onClick={() => {setWarningAlert(false)}}
          >
              <span aria-hidden="true">&times;</span>
          </button>
      </Alert>
      
    </>
  );
}

export default Example;

Uncontrolled

Default! This is a default alert—check it out!

Primary! This is a primary alert—check it out!

Secondary! This is a secondary alert—check it out!

Info! This is a info alert—check it out!

Success! This is a success alert—check it out!

Danger! This is a danger alert—check it out!

Warning! This is a warning alert—check it out!

import React from "react";

// reactstrap components
import { UncontrolledAlert } from "reactstrap";

// Core Components


function Example() {
  return (
    <>
      
      <UncontrolledAlert color="default">
        <span className="alert-icon">
          <i className="ni ni-like-2"></i>
        </span>
        <span className="alert-text">
          <strong>Default!</strong>{" "}
          This is a default alert—check it out!
        </span>
      </UncontrolledAlert>
      
      <UncontrolledAlert color="primary">
        <span className="alert-icon">
          <i className="ni ni-like-2"></i>
        </span>
        <span className="alert-text">
          <strong>Primary!</strong>{" "}
          This is a primary alert—check it out!
        </span>
      </UncontrolledAlert>
      
      <UncontrolledAlert color="secondary">
        <span className="alert-icon">
          <i className="ni ni-like-2"></i>
        </span>
        <span className="alert-text">
          <strong>Secondary!</strong>{" "}
          This is a secondary alert—check it out!
        </span>
      </UncontrolledAlert>
      
      <UncontrolledAlert color="info">
        <span className="alert-icon">
          <i className="ni ni-like-2"></i>
        </span>
        <span className="alert-text">
          <strong>Info!</strong>{" "}
          This is a info alert—check it out!
        </span>
      </UncontrolledAlert>
      
      <UncontrolledAlert color="success">
        <span className="alert-icon">
          <i className="ni ni-like-2"></i>
        </span>
        <span className="alert-text">
          <strong>Success!</strong>{" "}
          This is a success alert—check it out!
        </span>
      </UncontrolledAlert>
      
      <UncontrolledAlert color="danger">
        <span className="alert-icon">
          <i className="ni ni-like-2"></i>
        </span>
        <span className="alert-text">
          <strong>Danger!</strong>{" "}
          This is a danger alert—check it out!
        </span>
      </UncontrolledAlert>
      
      <UncontrolledAlert color="warning">
        <span className="alert-icon">
          <i className="ni ni-like-2"></i>
        </span>
        <span className="alert-text">
          <strong>Warning!</strong>{" "}
          This is a warning alert—check it out!
        </span>
      </UncontrolledAlert>
      
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.