Notification

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

Custom Notification Types

Pro Component notificationImg

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 notificationImg2

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 notificationImg3

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 notificationImg4

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>
  );
};

API

In this section you will find advanced information about the Notification component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Notification Import Statement

You need to import the Contrast Notification component first before using it.

import { CDBNotification } from "cdbreact";

API Reference: Contrast Notification Properties

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

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

Multiselect

LIstGroup