Badges

Some features in this component requires CDB React Pro package.Clickhereto try it out.

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.

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

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

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

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

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.

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.

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.

Name	Type	Default	Description	Example
className	String	Adds custom classes	Adds custom classes	<CDBBadge className="myClass" ... />
color	String	primary	Determines badge color, accepts CDB predefined color classes: `primary` `secondary` `success` `danger` `warning` `info` `light` `dark`	<CDBBadge color="primary" ... />
flat	Boolean	false	Adds flat effect to badge	<CDBBadge color="primary" flat .../>
size	String	medium	Determines badge size, available values: `small` `medium` `large`, `medium` by default	<CDBBadge color="secondary" size="large" .../>
borderType	String	box	Determines the corners effect of the badge	<CDBBadge color="secondary" borderType="pill" .../>
tag	String	span	Changes default tag	<CDBBadge color="secondary" tag="span" .../>

Visually build tailwind css projects 10x faster using AI

Build Tailwind websites visually and ship projects to production in minutes instead of days. Generates code from your designs to export to your favourite frameworks like React, Vue, Angular.

Try Windframe out for free.

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.

Autocomplete

ButtonGroup