🎉
Windframe Form builder is finally here.

Badges

React Bootstrap 5 Badges

React Bootstrap 5 Badges are used to signal and display messages. React Bootstrap 5 Badges can be used to display notifications such as unread messages and missed phone calls.

Importing the React Bootstrap 5 Badge component

To use the Contrast React Bootstrap 5 Badge component, you start up by importing CDBBadge into your project.

js
import { CDBBadge, CDBIcon } from "cdbreact";

Default Contrast Badge

Using relative font sizing and 'em' units, the Contrast React Bootstrap 5 Badge scales to the size of the immediate parent element.

PrimarySecondary BadgeSuccess BadgeDanger BadgeWarning BadgeInfo BadgeDark Badge
js
import React from "react";
import { CDBBadge, CDBContainer } from "cdbreact";
export const Badge = () => {
return (
<CDBContainer>
<CDBBadge color="primary">
Primary
</CDBBadge>
<CDBBadge color="secondary">
Secondary Badge
</CDBBadge>
<CDBBadge color="success">
Success Badge
</CDBBadge>
<CDBBadge color="danger">
Danger Badge
</CDBBadge>
<CDBBadge color="warning">
Warning Badge
</CDBBadge>
<CDBBadge color="info">
Info Badge
</CDBBadge>
<CDBBadge color="dark">
Dark Badge
</CDBBadge>
</CDBContainer>
);
};

Pill Badges

You can set the value of the 'borderType' attribute to 'pill' using this React Bootstrap 5 Badge. The badges become more rounded as a result of this change.

PrimarySecondary BadgeSuccess BadgeDanger BadgeWarning BadgeInfo BadgeDark Badge
js
import React from "react";
import { CDBBadge, CDBContainer } from "cdbreact";
export const Badge = () => {
return (
<CDBContainer>
<CDBBadge color="primary" borderType="pill">
Primary
</CDBBadge>
<CDBBadge color="secondary" borderType="pill">
Secondary Badge
</CDBBadge>
<CDBBadge color="success" borderType="pill">
Success Badge
</CDBBadge>
<CDBBadge color="danger" borderType="pill">
Danger Badge
</CDBBadge>
<CDBBadge color="warning" borderType="pill">
Warning Badge
</CDBBadge>
<CDBBadge color="info" borderType="pill">
Info Badge
</CDBBadge>
<CDBBadge color="dark" borderType="pill">
Dark Badge
</CDBBadge>
</CDBContainer>
);
};

Contextual Variations

Use the'size' prop to specify how large or small your badge should be. The standard badge size is medium. We can check out the code and the contextual variations offered by this.

LargeNormalSmall
js
import React from "react";
import { CDBBadge, CDBContainer } from "cdbreact";
export const Badge = () => {
return (
<CDBContainer>
<CDBBadge color="secondary" size="large">
Large
</CDBBadge>
<CDBBadge color="primary">Medium</CDBBadge>
<CDBBadge color="success" size="small">
Small
</CDBBadge>
</CDBContainer>
);
};

Flat Badges

To remove the badge shadows from your badges, use the 'flat' attribute. Your badges will take on the appearance of the badges shown below if you use this characteristic.

PrimaryFlat SecondaryFlat SuccessFlat DangerFlat WarningFlat InfoFlat Dark
js
import React from "react";
import { CDBBadge, CDBContainer } from "cdbreact";
export const Badge = () => {
return (
<CDBContainer>
<CDBBadge color="primary" flat>
Flat Primary
</CDBBadge>
<CDBBadge color="secondary" flat>
Flat Secondary
</CDBBadge>
<CDBBadge color="success" flat>
Flat Success
</CDBBadge>
<CDBBadge color="danger" flat>
Flat Danger
</CDBBadge>
<CDBBadge color="warning" flat>
Flat Warning
</CDBBadge>
<CDBBadge color="info" flat>
Flat Info
</CDBBadge>
<CDBBadge color="dark" flat>
Flat Dark
</CDBBadge>
</CDBContainer>
);
};

Badges with Icons

Pro Component

The CDBIcon component is used in this tutorial. More information on how to use the Contrast React Bootstrap 5 Icon in your project can be found in our documentation.

We can have icons in our badges by nesting the 'CDBIcon' component in our 'CDBBadge' component.

js
import React from "react";
import { CDBBadge, CDBIcon, CDBContainer } from "cdbreact";
export const Badge = () => {
return (
<CDBContainer>
<CDBBadge color="secondary">
<CDBIcon fab icon="facebook-f" />
</CDBBadge>
<CDBBadge color="primary">
<CDBIcon fab icon="instagram" />
</CDBBadge>
<CDBBadge color="success">
<CDBIcon fab icon="snapchat-ghost" />
</CDBBadge>
<CDBBadge color="info">
<CDBIcon icon="anchor" />
</CDBBadge>
<CDBBadge color="warning">
<CDBIcon far icon="sun" />
</CDBBadge>
<CDBBadge color="danger">
<CDBIcon icon="battery-three-quarters" />
</CDBBadge>
<CDBBadge color="success">
<CDBIcon fab icon="btc" size="large" />
</CDBBadge>
<CDBBadge borderType="pill" color="secondary" size="large">
<CDBIcon icon="heart" />
</CDBBadge>
<CDBBadge borderType="pill" color="danger">
<CDBIcon fab icon="apple" />
</CDBBadge>
<CDBBadge borderType="pill" color="primary" size="large">
<CDBIcon icon="users" />
</CDBBadge>
</CDBContainer>
);
};

Rounded Badges with Icons

Pro Component

You can use these rounded pages with icons on your projects as a pro component. The pages in your projects will look like this.

js
import React from "react";
import { CDBBadge, CDBIcon, CDBContainer } from "cdbreact";
export const Badge = () => {
return (
<CDBContainer>
<CDBBadge color="secondary">
<CDBIcon fab icon="facebook-f" />
</CDBBadge>
<CDBBadge color="primary">
<CDBIcon fab icon="instagram" />
</CDBBadge>
<CDBBadge color="success">
<CDBIcon fab icon="snapchat-ghost" />
</CDBBadge>
<CDBBadge color="info">
<CDBIcon icon="anchor" />
</CDBBadge>
<CDBBadge color="warning">
<CDBIcon far icon="sun" />
</CDBBadge>
<CDBBadge color="danger">
<CDBIcon icon="battery-three-quarters" />
</CDBBadge>
<CDBBadge color="success">
<CDBIcon fab icon="btc" size="large" />
</CDBBadge>
<CDBBadge borderType="pill" color="secondary" size="large">
<CDBIcon icon="heart" />
</CDBBadge>
<CDBBadge borderType="pill" color="danger">
<CDBIcon fab icon="apple" />
</CDBBadge>
<CDBBadge borderType="pill" color="primary" size="large">
<CDBIcon icon="users" />
</CDBBadge>
</CDBContainer>
);
};

Contrast React Bootstrap 5 Badge Props

The props you get to use with the Contrast React Bootstrap 5 Badge component will be elaborated on in this section. You'll learn what these props do, how to utilize them, and what their default values are.

The table below lists other prop options of the CDBBadge component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesAdds custom classes<CDBBadge className="myClass" ... />
colorStringprimaryDetermines badge color, accepts CDB predefined color classes: primary secondary success danger warning info light dark<CDBBadge color="primary" ... />
flatBooleanfalseAdds flat effect to badge<CDBBadge color="primary" flat .../>
sizeStringmediumDetermines badge size, available values: small medium large, medium by default<CDBBadge color="secondary" size="large" .../>
borderTypeStringboxDetermines the corners effect of the badge<CDBBadge color="secondary" borderType="pill" .../>
tagStringspanChanges default tag<CDBBadge color="secondary" tag="span" .../>

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

ad-banner

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