Skip to main content

Badge Component

The Badge component in React is a simple and customizable component designed to display a badge with a title. It's suitable for indicating statuses, categories, or other small pieces of information.

Features​

  • Displays text inside a badge-like element.
  • Customizable background color based on the active state.
  • Simple and reusable for various purposes like status indicators, tags, etc.

Props​

PropTypeDescription
titlestringText to be displayed inside the badge.
isActivebooleanDetermines the background color of the badge.

Component​

here is the codesandbox link of component

Edit text-input-react-hook-form

Usage​

This component can be used in scenarios where a small, informative label is required, such as in a list of items to indicate status, in a navigation menu, or in a user interface displaying tags or categories.

Example Usage​

import Badge from "./path/to/Badge";

const MyComponent = () => {
  return (
    <div>
      <Badge title="Active" isActive={true} />
      <Badge title="Inactive" isActive={false} />
    </div>
  );
};

Styling​

  • Styled using Tailwind CSS, with conditional classes for isActive state.
  • Customize the appearance by altering the Tailwind classes or adding new ones.

Notes​

  • Ensure the title prop is provided for displaying text within the badge.
  • The isActive prop can be used to toggle between different styles, making the component versatile for various use cases.

This documentation provides an overview of the Badge component, including its features, props, usage, and styling. Adapt the component as needed for your specific project requirements.