Badge Showcase

Introduction

The Badge component is a versatile and modern UI element used to display status, notifications, or other contextual information. It supports various styles and sizes to fit different use cases. Below you will find examples showcasing different badge variants along with their respective code snippets.

Usage Examples

Primary Badge
<Badge variant="primary" text="Primary Badge"  />
Success Badge
<Badge variant="success" text="Success Badge"  />
Warning Badge
<Badge variant="warning" text="Warning Badge"  />
Error Badge
<Badge variant="error" text="Error Badge"  />
Info Badge
<Badge variant="info" text="Info Badge"  />
Light Badge
<Badge variant="light" text="Light Badge"  />
Dark Badge
<Badge variant="dark" text="Dark Badge"  />
Outline Badge
<Badge variant="outline" text="Outline Badge"  />