Badges

Documentation and examples for badges, our small count and labeling component.

Examples

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

PrimarySecondary BadgeSuccess BadgeDanger BadgeWarning BadgeInfo BadgeDark Badge

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

Pill Badges

Set the borderType property to pill to make badges more rounded.

PrimarySecondary BadgeSuccess BadgeDanger BadgeWarning BadgeInfo BadgeDark Badge

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

Add any of the below mentioned properties to change the appearance of a badge.

LargeNormalSmall

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

Add the flat property to change the appearance of a badge.

PrimaryFlat SecondaryFlat SuccessFlat DangerFlat WarningFlat InfoFlat Dark

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

Use CDBIcon to add icons to a badge.

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

Set the borderType property to pill to make badges more rounded. Use CDBIcon to add icons to a badge.

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

API

In this section you will find advanced information about the Contrast Badge component. You will find out which modules are needed, the different possibilities of configuring the component, and what events and methods you can use in working with it.

Contrast Badge Import Statement

You need to import the Contrast Badge component first before using it. If icons are needed, you will also need to import the Contrast Icon component.

import { CDBBadge, CDBIcon } from "cdbreact";

API Reference: Contrast Badge Properties

The table below shows the configuration 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" .../>

Box

Breadcrumb