Badge

<bh-badge> | BharatBadge

Badges are small visual indicators used to highlight information, statuses, or counts. They’re commonly used to display notification counts, status indicators, or labels.

Open in

Default

Primary

Secondary

Success

Warning

Danger

Pill

Soft

Outline

Basic Usage

Preview

Open in

Default

HTML

<bh-badge>Default</bh-badge>

React

import React from 'react';
import { BharatBadge } from 'bharat-ui/react/components/badge';

function App() {
return (
    <BharatBadge>Default</BharatBadge>
);
}

export default App;

Size Variants

Preview

Open in

SmallSmall

MediumMedium

LargeLarge

HTML

<!-- Small badge -->
<bh-badge size="small">Small</bh-badge>

<!-- Medium badge -->
<bh-badge size="medium">Medium</bh-badge>

<!-- Large badge -->
<bh-badge size="large">Large</bh-badge>

React

 import React from 'react';
  import { BharatBadge } from 'bharat-ui/react/components/badge';

function App() {
return (
  <>
      <BharatBadge size="small">Small</BharatBadge>
      <BharatBadge size="medium">Medium</BharatBadge>
      <BharatBadge size="large">Large</BharatBadge>
  </>
);
}

export default App;

Color Variants

Standard Colors

Preview

Open in

Primary

Primary

Secondary

Secondary

Success

Success

Warning

Warning

Danger

Danger

HTML

<bh-badge variant="primary">Primary</bh-badge>
<bh-badge variant="secondary">Secondary</bh-badge>
<bh-badge variant="success">Success</bh-badge>
<bh-badge variant="warning">Warning</bh-badge>
<bh-badge variant="danger">Danger</bh-badge>

React

import React from 'react';
import { BharatBadge } from 'bharat-ui/react/components/badge';

function App() {
return (
<>
    <BharatBadge variant="primary">Primary</BharatBadge>
    <BharatBadge variant="secondary">Secondary</BharatBadge>
    <BharatBadge variant="success">Success</BharatBadge>
    <BharatBadge variant="warning">Warning</BharatBadge>
    <BharatBadge variant="danger">Danger</BharatBadge>
</>
);
}

export default App;

Pill Badges

Preview

Open in

PrimaryPrimary

SecondarySecondary

SuccessSuccess

WarningWarning

DangerDanger

HTML

<bh-badge variant="primaryPill">Primary</bh-badge>
<bh-badge variant="secondaryPill">Secondary</bh-badge>
<bh-badge variant="successPill">Success</bh-badge>
<bh-badge variant="warningPill">Warning</bh-badge>
<bh-badge variant="dangerPill">Danger</bh-badge>

React

import React from 'react';
import { BharatBadge } from 'bharat-ui/react/components/badge';

function App() {
return (
<>
    <BharatBadge variant="primaryPill">Primary</BharatBadge>
    <BharatBadge variant="secondaryPill">Secondary</BharatBadge>
    <BharatBadge variant="successPill">Success</BharatBadge>
    <BharatBadge variant="warningPill">Warning</BharatBadge>
    <BharatBadge variant="dangerPill">Danger</BharatBadge>
</>
);
}

export default App;

Pill Soft Badges

Preview

Open in

Primary

Primary

Secondary

Secondary

Success

Success

Warning

Warning

Danger

Danger

HTML

<bh-badge variant="primaryPillSoft">Primary</bh-badge>
<bh-badge variant="secondaryPillSoft">Secondary</bh-badge>
<bh-badge variant="successPillSoft">Success</bh-badge>
<bh-badge variant="warningPillSoft">Warning</bh-badge>
<bh-badge variant="dangerPillSoft">Danger</bh-badge>

React

import React from 'react';
import { BharatBadge } from 'bharat-ui/react/components/badge';

function App() {
return (
<>
    <BharatBadge variant="primaryPillSoft">Primary</BharatBadge>
    <BharatBadge variant="secondaryPillSoft">Secondary</BharatBadge>
    <BharatBadge variant="successPill">Success</BharatBadge>
    <BharatBadge variant="successPillSoft">Warning</BharatBadge>
    <BharatBadge variant="dangerPillSoft">Danger</BharatBadge>
</>
);
}

export default App;

Outline Badges

Preview

Open in

Primary

Primary

Secondary

Secondary

Success

Success

Warning

Warning

Danger

Danger

HTML

<bh-badge variant="primaryOutline">Primary</bh-badge>
<bh-badge variant="secondaryOutline">Secondary</bh-badge>
<bh-badge variant="successOutline">Success</bh-badge>
<bh-badge variant="warningOutline">Warning</bh-badge>
<bh-badge variant="dangerOutline">Danger</bh-badge>

React

import React from 'react';
import { BharatBadge } from 'bharat-ui/react/components/badge';

function App() {
return (
<>
    <BharatBadge variant="primaryOutline">Primary</BharatBadge>
    <BharatBadge variant="secondaryOutline">Secondary</BharatBadge>
    <BharatBadge variant="successOutline">Success</BharatBadge>
    <BharatBadge variant="warningOutline">Warning</BharatBadge>
    <BharatBadge variant="dangerOutline">Danger</BharatBadge>
</>
);
}

export default App;

Usage Examples

Status Indicators

Open in

User Status

Online

Show user status with appropriate colors

Order Status

Processing

Indicate order progress with pill badges

Notification Counts

Open in

Messages

📨

5

Show unread message count

Notifications

🔔

12

Display notification count

Properties

Property	Type	Description
size	string	Badge size: "small", "medium", or "large"
variant	string	Badge style variant (see Variants section)
width	string	Custom width (e.g., "100px")
height	string	Custom height (e.g., "20px")
background	string	Custom background color
border	string	Custom border style
color	string	Custom text color
font	string	Custom font size