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.
<Badge variant="primary" text="Primary Badge" />
<Badge variant="success" text="Success Badge" />
<Badge variant="warning" text="Warning Badge" />
<Badge variant="error" text="Error Badge" />
<Badge variant="info" text="Info Badge" />
<Badge variant="light" text="Light Badge" />
<Badge variant="dark" text="Dark Badge" />
<Badge variant="outline" text="Outline Badge" />