Badge
Displays a badge or a component that looks like a badge.
# Demo
Sample
Sample
Sample
Sample
Sample
# Attributes
Name | Type | Default | Details |
---|---|---|---|
className | string | ' ' | You can customise by passing tailwind classes. |
size | BadgeSize | BadgeSize.SM | You can pass size of the badge. |
children | string | ReactNode | Required | You can pass badge content as children. |
# Usage
import { NBadge, BadgeSize } from 'nayan';
const Badge = () => {
return (
<div>
<NBadge size={BadgeSize.XS} className="text-text bg-card border border-border mr-2">Sample</NBadge>
<NBadge size={BadgeSize.XS} className="text-blue-700 bg-blue-300 mr-2">Sample</NBadge>
<NBadge size={BadgeSize.SM} className="text-green-700 bg-green-300 mr-2">Sample</NBadge>
<NBadge size={BadgeSize.MD} className="text-yellow-700 bg-yellow-300 mr-2">Sample</NBadge>
<NBadge size={BadgeSize.LG} className="text-red-700 bg-red-300 mr-2">Sample</NBadge>
</div>
);
};
export default Badge;