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">×</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">×</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">×</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">×</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">×</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">×</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">×</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.