Search...

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";
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>
);
};
export default Badge

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";
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>
);
};
export default Badge

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";
const Badge = () => {
return (
<CDBContainer>
<CDBBadge color="secondary" size="large">
Large
</CDBBadge>
<CDBBadge color="primary">Medium</CDBBadge>
<CDBBadge color="success" size="small">
Small
</CDBBadge>
</CDBContainer>
);
};
export default Badge

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";
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>
);
};
export default Badge

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";
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>
);
};
export default Badge

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";
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>
);
};
export default Badge

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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner