Alert

The Alert component displays a message or feedback to the user, usually in response to an action or an event. The Alert component can have different severity levels, such as success, info, warning, or error, and can be styled accordingly. The Alert component can also be dismissed by the user or automatically after a certain time.

You can find the Alerts component in the src/views/Alerts.jsx file.

Examples

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight variants. Alert Preview

Preview

Result

This is a primary alert—check it out!

This is a secondary alert—check it out!

This is a success alert—check it out!

Code

import Alert from "react-bootstrap/Alert";

function MyComponent() {
    return (
        <>
            <Alert variant="primary" dismissible>This is a primary alert—check it out!</Alert>
            <Alert variant="secondary" dismissible>This is a secondary alert—check it out!</Alert>
            <Alert variant="success" dismissible>This is a success alert—check it out!</Alert>
        </>
    );
}

export default MyComponent;

Link

For links, use the <Alert.Link> component to provide matching colored links within any alert. Alert Link Preview

Preview

Result

This is a primary alert with an example link. Give it a click if you like.

This is a secondary alert with an example link. Give it a click if you like.

This is a success alert with an example link. Give it a click if you like.

Code

Alerts

import Alert from "react-bootstrap/Alert";

function MyComponent() {
    return (
        <>
            <Alert variant="primary">
                This is a primary alert with
                <Alert.Link target="_blank" href="https://demo.reactadmin.com/bootstrap/reacty/components/alerts">an example link</Alert.Link>.
                Give it a click if you like.
            </Alert>
            <Alert variant="secondary">
                This is a secondary alert with
                <Alert.Link target="_blank" href="https://demo.reactadmin.com/bootstrap/reacty/components/alerts">an example link</Alert.Link>.
                Give it a click if you like.
            </Alert>
            <Alert variant="success">
                This is a success alert with
                <Alert.Link target="_blank" href="https://demo.reactadmin.com/bootstrap/reacty/components/alerts">an example link</Alert.Link>.
                Give it a click if you like.
            </Alert>
        </>
    );
}

export default MyComponent;

With Badge

Alerts can contain another component also like <Badge>. Alert Preview

Preview

Result

Success You successfully read this important alert.

Primary You successfully read this important alert.

Secondary You successfully read this important alert.

Code

Alerts

import { Alert, Badge } from "react-bootstrap";

function MyComponent() {
    return (
        <>
            <Alert variant="success">
                <Badge bg="success">Success</Badge>
                You successfully read this important alert.
            </Alert>
            <Alert variant="primary">
                <Badge bg="primary">Primary</Badge>
                You successfully read this important alert.
            </Alert>
            <Alert variant="secondary">
                <Badge bg="secondary">Secondary</Badge>
                You successfully read this important alert.
            </Alert>
        </>
    );
}

export default MyComponent;

Additional content Alerts can contain whatever content you like. Headers, paragraphs,

dividers, go crazy. Alert Preview

Preview

Result

Well done!

You successfully read this important alert message. This example text is going to run a bit longer so that you can see alert content.

---

Whenever you need to, be sure to use margin utilities nice and tidy.

Code

Alerts

import Alert from "react-bootstrap/Alert";

function MyComponent() {
    return (
        <Alert variant="success" dismissible>
            <Alert.Heading>Well done!</Alert.Heading>
            <p>
            You successfully read this important alert message. This example text is going to run a bit longer so that you can see alert content.
            </p>
            <hr />
            <p>Whenever you need to, be sure to use margin utilities nice and tidy.</p>
        </Alert>
    );
}

export default MyComponent;

Props

Name	Type	Default	Description
variant	primary, secondary, success, danger, warning, info, dark, light		A string that specifies the color scheme of the alert. You can choose from eight options: primary, secondary, success, danger, warning, info, dark, or light. The default value is primary.
dismissible	boolean		A boolean that indicates whether the alert can be closed by the user. If dismissible is true, a close button will appear on the right side of the alert. If dismissible is false, the alert will not have a close button. The default value is false.
show	boolean		A boolean that indicates whether the alert is visible or not. If show is true, the alert will be rendered on the screen. If show is false, the alert will be hidden. The default value is true.
onClose	func		A function that is called when the alert is closed by the user or by the timeout. The function receives the event object as the argument. You can use this prop to perform any action or logic when the alert is closed. For example, you can use onClose to update the state of the parent component or to trigger another alert. The default value is null.

For more props please visit to react-bootstrap