react-pretty-badge

A simple and stylish React badge component.

🚀 Installation

Install the package via npm:

npm install react-pretty-badge

📦 Usage

Create your component at the demo page in a sandbox

Basic Example

import React from "react";
import PrettyBadge from "react-pretty-badge";

const App = () => {
  return <PrettyBadge label="Premium" />;
};

export default App;

🎨 Customization

Props

Prop	Type	Default	Description
label	string	-	Text inside the badge
color	From a predefined list of colors, or a hex code	grey	Background color of the badge
size	Can be xs, sm, md, lg, xl, xxl, xxxl or a number	md	Size of the badge
borderRadius	Can be rounded, pill, or a number	pill	Size of the badge
id	string	-	Optional id for the badge
className	string	-	Optional class name for the badge

Custom Styles

You can override styles using CSS:

For badge container

.react-pretty-badge-parent {
  background-color: red;
  border: 1px solid blue;
}

For badge text

.react-pretty-badge-text {
  font-family: "system-ui", sans-serif;
}

Targetting a specific badge

To apply styles only for a single badge, provide an id and apply style using

.react-pretty-badge-<your-id > {
  font-family: "system-ui", sans-serif;
}

Custom classes

Use the className property to add a custom class to the badge.

.my-custom-class {
  filter: blur(10px);
}

Available Colors

Color	Hex Code	Preview
red	#FF5924
blue	#3089F2
green	#2ECC71
yellow	#FBBE29
purple	#9B59B6
grey	#8A8A8A
orange	#FF843E
peach	#FEB8B7
cyan	#0ABDF6

Using a predefined color

import React from "react";
import PrettyBadge from "react-pretty-badge";

const App = () => {
  return (
    <>
      <PrettyBadge label="this badge is orange!" color="orange" />
      <PrettyBadge label="this badge is cyan!" color="cyan" size="lg" />
    </>
  );
};

Using a custom color

import React from "react";
import PrettyBadge from "react-pretty-badge";

const App = () => {
  return (
    <>
      <PrettyBadge label="this badge is black!" color="#000000" />
    </>
  );
};

🛠️ Development

Run Locally with npm link

git clone https://github.com/yatish1606/react-pretty-badge.git
cd react-pretty-badge
npm install
npm run build
npm link

Then, in your test project:

npm link react-pretty-badge

📜 License

MIT License © 2025 Yatish Kelkar