Badge

The Badge component is a versatile and reusable component that allows us to display badges or labels in our app. We can customize it by passing various props to suit our component needs. In this guide, we’ll walk through how to use the Badge component in codebase.

Importing the Badge Component

To use the Badge component in our app, we need to import it from our styled components. Here’s how we can import it:

import { Badge } from "StyledComponents";

Using the Badge Component

The Badge component can be used with various props to control its appearance. Here are some examples of how we can use it:

<Badge
  text="Paid"
/>

<Badge
  className="uppercase"
  text="Paid"
/>

<Badge
  className="uppercase"
  bgColor="bg-emerald-100"
  text="Paid"
/>

<Badge
  className="mt-2 uppercase"
  bgColor="bg-sky-100"
  color="text-sky-900"
  text="Paid"
/>

<Badge
  className="bg-amber-100 text-amber-900 mt-2 uppercase"
  text="Paid"
/>

Badge Component Props