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