Badge Component

The Badge component is a customizable React component designed for displaying badges with different sizes, variants, and colors. This component is inspired by the DaisyUI (opens in a new tab) framework's design for badges.

Example Preview

Badge Example

Usage

import { Badge } from "@/@core";
 
// Example usage of Badge component
const MyBadge = () => {
  return (
    <Badge size="default" variant="default" color="primary">
      Badge
    </Badge>
  );
};
 
export default MyBadge;

Props

Prop Name	Type	Default Value	Required	Description
`size`	`xSmall`, `small`, `default`, `medium`, `large`	`default`	No	Size of the badge.
`variant`	`default`, `outline`	`default`	No	Variant of the badge.
`color`	`default`, `primary`, `secondary`, `info`, `accent`, `success`, `warning`, `error`	`default`	No	Color of the badge.
`children`	`React.ReactNode`	-	No	Content to be displayed inside the badge.
`className`	`string`	-	No	Additional class name(s) for the badge.

Examples

Here are examples of using the Badge component with different configurations:

<Badge>Badge</Badge>
<Badge size="xSmall">Badge</Badge>
<Badge size="small">Badge</Badge>
<Badge size="default">Badge</Badge>
<Badge size="medium">Badge</Badge>
<Badge size="large">Badge</Badge>
<Badge variant="default">Badge</Badge>
<Badge variant="outline">Badge</Badge>
<Badge color="default">Badge</Badge>
<Badge color="primary">Badge</Badge>

These examples demonstrate how to use the Badge component with different sizes, variants, and colors. Customize the props based on your design requirements.

Feel free to adjust the installation and usage sections based on your project structure and requirements.

ℹ️

Note: The Badge component provides a customizable way to display badges with different sizes, variants, and colors. It is inspired by the DaisyUI (opens in a new tab) framework's design for badges. Check it out for more awesome components.

Avatar Box Item