Badge

<bh-badge>

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

Primary

Secondary

Success

Warning

Danger

Pill

Soft

Outline

Basic Usage

Preview

DefaultPrimarySuccess

HTML

<bh-badge size="medium">Default</bh-badge>
<bh-badge size="medium" variant="primary">Primary</bh-badge>
<bh-badge size="medium" variant="success">Success</bh-badge>

Size Variants

Preview

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>

Color Variants

Standard Colors

Preview

Primary

Primary

Secondary

Secondary

Success

Success

Warning

Warning

Danger

Danger

HTML

<!-- Standard color badges -->
<bh-badge size="medium" variant="primary">Primary</bh-badge>
<bh-badge size="medium" variant="secondary">Secondary</bh-badge>
<bh-badge size="medium" variant="success">Success</bh-badge>
<bh-badge size="medium" variant="warning">Warning</bh-badge>
<bh-badge size="medium" variant="danger">Danger</bh-badge>

Pill Badges

Preview

PrimaryPrimary

SecondarySecondary

SuccessSuccess

WarningWarning

DangerDanger

HTML

<!-- Pill badges -->
<bh-badge size="medium" variant="primaryPill">Primary</bh-badge>
<bh-badge size="medium" variant="secondaryPill">Secondary</bh-badge>
<bh-badge size="medium" variant="successPill">Success</bh-badge>
<bh-badge size="medium" variant="warningPill">Warning</bh-badge>
<bh-badge size="medium" variant="dangerPill">Danger</bh-badge>

Soft Badges

Preview

PrimaryPrimary

SecondarySecondary

SuccessSuccess

WarningWarning

DangerDanger

HTML

<!-- Soft badges -->
<bh-badge size="medium" variant="primarySoft">Primary</bh-badge>
<bh-badge size="medium" variant="secondarySoft">Secondary</bh-badge>
<bh-badge size="medium" variant="successSoft">Success</bh-badge>
<bh-badge size="medium" variant="warningSoft">Warning</bh-badge>
<bh-badge size="medium" variant="dangerSoft">Danger</bh-badge>

Soft Outline Badges

Preview

PrimaryPrimary

SecondarySecondary

SuccessSuccess

WarningWarning

DangerDanger

HTML

<!-- Soft outline badges -->
<bh-badge size="medium" variant="primarySoftOutline">Primary</bh-badge>
<bh-badge size="medium" variant="secondarySoftOutline">Secondary</bh-badge>
<bh-badge size="medium" variant="successSoftOutline">Success</bh-badge>
<bh-badge size="medium" variant="warningSoftOutline">Warning</bh-badge>
<bh-badge size="medium" variant="dangerSoftOutline">Danger</bh-badge>

Pill Soft Badges

Preview

Primary

Primary

Secondary

Secondary

Success

Success

Warning

Warning

Danger

Danger

HTML

<!-- Pill soft badges -->
<bh-badge size="medium" variant="primaryPillSoft">Primary</bh-badge>
<bh-badge size="medium" variant="secondaryPillSoft">Secondary</bh-badge>
<bh-badge size="medium" variant="successPillSoft">Success</bh-badge>
<bh-badge size="medium" variant="warningPillSoft">Warning</bh-badge>
<bh-badge size="medium" variant="dangerPillSoft">Danger</bh-badge>

Outline Badges

Preview

Primary

Primary

Secondary

Secondary

Success

Success

Warning

Warning

Danger

Danger

HTML

<!-- Outline badges -->
<bh-badge size="medium" variant="primaryOutline">Primary</bh-badge>
<bh-badge size="medium" variant="secondaryOutline">Secondary</bh-badge>
<bh-badge size="medium" variant="successOutline">Success</bh-badge>
<bh-badge size="medium" variant="warningOutline">Warning</bh-badge>
<bh-badge size="medium" variant="dangerOutline">Danger</bh-badge>

Special Variants

Preview

Gradient

Gradient

Neutral

Neutral

Light

Light

Dark

Dark

HTML

<!-- Special variant badges -->
<bh-badge size="medium" variant="gradient">Gradient</bh-badge>
<bh-badge size="medium" variant="neutral">Neutral</bh-badge>
<bh-badge size="medium" variant="light">Light</bh-badge>
<bh-badge size="medium" variant="dark">Dark</bh-badge>

Custom Styling Examples

You can customize badges by setting specific properties:

Preview

Custom Color

Custom Purple

Custom Border

Dashed Border

Round Badge

Round

HTML

<!-- Custom color badge -->
<bh-badge size="medium" width="120px" color="white" background="purple" font="16px">Custom Purple</bh-badge>

<!-- Custom border badge -->

<bh-badge size="medium" width="120px" color="yellow" background="green" borderRadius="50px" border="3px dashed" font="14px">Dashed Border</bh-badge>

<!-- Round badge -->

<bh-badge size="medium" width="50px" height="50px" borderRadius="50%" background="olive" color="white">Round</bh-badge>

Usage Examples

Status Indicators

User Status

Online

Show user status with appropriate colors

Order Status

Processing

Indicate order progress with pill badges

Notification Counts

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
borderRadius	string	Custom border radius
border	string	Custom border style
color	string	Custom text color
font	string	Custom font size