Component Preview
Below is a small preview of what the Badge
component looks like in the application.
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>
)
}