Component Preview

Below is a small preview of what the Badge component looks like in the application.

Badge Component Preview

Badge Component

The Badge component is used to display small labels or notifications alongside an element. It’s typically used to highlight important information, such as status or updates. The badge can be styled with different colors and sizes to match your design system.

Usage Example

Below is an example of how to integrate the Badge component to label important updates or statuses:

Example.tsx
import Badge from "@/components/Badge"

export default function Example() {
  return (
    <div>
      <Badge text="New" />
      <p>Product Name</p>
    </div>
  )
}