Notification

React Bootstrap 5 Notification

React Bootstrap 5 notification is a component that allows you to send visitors to your website simple and easily customizable alert messages. Toasts are little notifications that are meant to look like the push notifications that have become popular on mobile and desktop platforms. Because they're made with flexbox, they're simple to align and place.

Importing the React Bootstrap 5 Notification Component

Start by importing CDBNotification into your project to use the Contrast React Bootstrap 5 Notification component.

import { CDBNotification } from "cdbreact";

Custom Notification

Pro Component

There are a few options for the React Bootstrap 5 Notification. The show option makes your notification component visible, while the fade property makes your notification component fade out as it leaves your screen.

To alter the color of the icon in your notification, we add a text value to the iconClassName prop on our CDBNotification component, then attach the color we want it to have (e.g., primary, secondary, etc.). iconClassName = "text-primary" is an example.

Contrast React Bootstrap 5 Default Notification

import React from "react";
import { CDBNotification, CDBContainer } from "cdbreact";

export const Notification = () => {
  return (
    <CDBContainer>
          <CDBNotification
            show
            fade
            autohide={2}
            title="Contrast"
            message="Hello, world! This is a primary message."
            text="11 mins ago"
          />
          <CDBNotification
            show
            fade
            iconClassName="text-primary"
            title="Contrast"
            message="Hello, world! This is a primary message."
            text="11 mins ago"
          />
          <CDBNotification
            show
            fade
            iconClassName="text-secondary"
            title="Contrast"
            message="Hello, world! This is a primary message."
            text="11 mins ago"
          />
    </CDBContainer>
  );
};

Notification with Hidden Message

Pro Component Contrast React Bootstrap 5 Notification with Hidden Message

import React from "react";
import { CDBNotification, CDBContainer } from "cdbreact";

export const Notification = () => {
  return (
    <CDBContainer>
          <CDBNotification
            show
            fade
            hideMessage
            autohide={5}
            title="Contrast"
            message="Hello, world! This is a primary message."
            text="11 mins ago"
          />
          <CDBNotification
            show
            fade
            hideMessage
            iconClassName="text-success"
            title="Contrast"
            message="Hello, world! This is a primary message."
            text="11 mins ago"
          />
          <CDBNotification
            show
            fade
            hideMessage
            iconClassName="text-warning"
            title="Contrast"
            message="Hello, world! This is a primary message."
            text="11 mins ago"
          />
    </CDBContainer>
  );
};

Notification with Icons

Pro Component

You can customize the icon on your notification using the Contrast React Bootstrap 5 Notification component. Use the icon prop to do so.

Contrast React Bootstrap 5 Notification with Icons

import React from "react";
import { CDBNotification, CDBContainer } from "cdbreact";

export const Notification = () => {
  return (
    <CDBContainer>
            <CDBNotification
              show
              fade
              title="Contrast"
              icon="award"
              message="Hello, world! This is a primary message."
              text="11 mins ago"
            />
            <CDBNotification
              show
              fade
              iconClassName="text-primary"
              title="Contrast"
              icon="bus"
              message="Hello, world! This is a primary message."
              text="11 mins ago"
            />

            <CDBNotification
              show
              fade
              iconClassName="text-danger"
              title="Contrast"
              icon="burn"
              message="Hello, world! This is a primary message."
              text="11 mins ago"
            />
            <CDBNotification
              show
              fade
              iconClassName="text-success"
              icon="car-crash"
              title="Contrast"
              message="Hello, world! This is a primary message."
              text="11 mins ago"
            />
    </CDBContainer>
  );
};

Positioning

Pro Component

The position parameter specifies where the notification should appear on the webpage.

Contrast React Bootstrap 5 Notification with Positioning

import React from "react";
import { CDBNotification, CDBContainer } from "cdbreact";

export const Notification = () => {
  return (
    <CDBContainer className="position-relative">
            <CDBNotification
              show
              fade
              title="Contrast"
              message="Hello, world! This is a positioned notification."
              text="11 mins ago"
              position="top-left"
            />
            <CDBNotification
              show
              fade
              title="Contrast"
              message="Hello, world! This is a positioned notification."
              text="11 mins ago"
              position="bottom-right"
            />
    </CDBContainer>
  );
};

Contrast React Bootstrap 5 Notification Props

The props you get to use with the React Bootstrap 5 Notification component will be elaborated upon in this section. You'll learn what these props do, how to utilize them in your code, and what their default values is.

Other prop settings for the 'CDBNotification' component are listed in the table below.

Name	Type	Default	Description	Example
bodyClassName	String		Adds custom className to the `body` section of notification component	<CDBNotification bodyClassName="p-5 font-weight-bold" .../>
bodyColor	String		Set color to the `body` section of notification component	<CDBNotification bodyColor="black" .../>
ClassName	String		Adds custom classes to the wrapper	<CDBNotification ClassName="stylish-color-dark" .../>
closeClassName	String	text-dark	Adds custom classes to the Close button	<CDBNotification closeClassName="blue-grey-text" .../>
tag	function or String	div	Changes default tag	<CDBNotification tag="div" ... />
fade	Boolean	false	Adds a fade effect when you close the notification	<CDBNotification fade .../>
hideMessage	Boolean	false	Hides messages in the component	<CDBNotification hideMessage .../>
autohide	Number		Sets time in ms when box hide. `0 = infinity`	<CDBNotification autoHide={3000} .../>
icon	String	square	Sets a custom icon	<CDBNotification icon="bell" ... />
iconClassName	String		Adds custom classes to the Icon	<CDBNotification iconClassName="green-text" ... />
message	String		Sets message of the notification	<CDBNotification message="Hello there! This is a toast message" ... />
position	String		One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left	<CDBNotification position="top-right" ... />
show	Boolean	false	Shows your component. If you do not use this setting, your component will exist, but it will be hidden.	<CDBNotification show .../>
text	String		Sets text of the notification	<CDBNotification text="11 minutes ago" ... />
title	String		Set header text of the notification	<CDBNotification title="Someone sent you an email" ... />
titleClassName	String		Adds custom classes to the title text	<CDBNotification titleClassName="elegant-color-dark-white-text" ... />
titleColor	String		Sets the color of the title	<CDBNotification titleColor="white" ... />

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Multiselect

Modal