Badge.tsx•927 B
import React from 'react';
interface BadgeProps {
children: React.ReactNode;
variant?: 'success' | 'warning' | 'error' | 'info' | 'default';
size?: 'sm' | 'md';
className?: string;
}
const variantStyles = {
success: 'bg-green-100 text-green-800 border-green-200',
warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',
error: 'bg-red-100 text-red-800 border-red-200',
info: 'bg-blue-100 text-blue-800 border-blue-200',
default: 'bg-gray-100 text-gray-800 border-gray-200'
};
const sizeStyles = {
sm: 'text-xs px-2 py-1',
md: 'text-sm px-3 py-1'
};
export const Badge: React.FC<BadgeProps> = ({
children,
variant = 'default',
size = 'md',
className = ''
}) => {
return (
<span
className={`inline-flex items-center font-medium rounded-full border ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
>
{children}
</span>
);
};
export default Badge;