React Alerts

Contrast Bootstrap Alerts are used to provide feedback messages to users after specific actions are carried out.

React Alert Examples

Contrast Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the contextual props (e.g., color="success"). For inline dismissal, use the dismiss prop.

import React from "react";
import { CDBAlert, CDBContainer } from "cdbreact";
const Alert = () => {
  return (
    <CDBContainer>
        <CDBAlert color="primary">
          A simple alert built with contrast design ch
        </CDBAlert>
        <CDBAlert color="secondary">
          A simple alert built with contrast design check it out!
        </CDBAlert>
        <CDBAlert color="success">
          A simple alert built with contrast design check it out!
        </CDBAlert>
        <CDBAlert color="danger">
          A simple alert built with contrast design check it out!
        </CDBAlert>
        <CDBAlert color="warning">
          A simple alert built with contrast design check it out!
        </CDBAlert>
        <CDBAlert color="dark">
          A simple alert built with contrast design check it out!
        </CDBAlert>
    </CDBContainer>
  );
};
export default Alert;

Additional Content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

import React from "react";
import { CDBAlert, CDBContainer } from "cdbreact";
const Alert = () => {
  return (
    <CDBContainer>
        <CDBAlert color="primary">
            <h4 class="alert-heading">Well done!</h4>
            <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
            <hr/>
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
        </CDBAlert>
    </CDBContainer>
  );
};
export default Alert;

Dismissing

Dismissing

Using the Contrast React Alert component, You can dismiss any alert inline by adding the dismiss prop Below is a live action demo.

import React from "react";
import { CDBAlert, CDBContainer } from "cdbreact";
const Alert = () => {
  return (
    <CDBContainer>
      <CDBAlert color="danger" dismiss>
        <strong>Holy guacamole!</strong> You should check in on some of
        those fields below.
      </CDBAlert>
    </CDBContainer>
  );
};
export default Alert;

API

In this section you will find advanced information about the Contrast Alert component. You will find out which modules are needed, the different possibilities of configuring the component, and what events and methods you can use in working with it.

Contrast Alert Import Statement

You need to import the Contrast Alert component first before using it

import { CDBAlert } from "cdbreact";

API Reference: Contrast Alert Properties

The table below shows the configuration options of the CDBAlert component.