30 lines
1.0 KiB
TypeScript
30 lines
1.0 KiB
TypeScript
import type { HTMLAttributes } from 'react';
|
|
|
|
type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'brand';
|
|
|
|
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
variant?: BadgeVariant;
|
|
}
|
|
|
|
const variantClasses: Record<BadgeVariant, string> = {
|
|
default: 'bg-[var(--color-neutral-100)] text-[var(--color-neutral-700)]',
|
|
success: 'bg-[var(--color-success-light)] text-[var(--color-success-dark,#15803d)]',
|
|
warning: 'bg-[var(--color-warning-light)] text-[var(--color-warning-dark,#b45309)]',
|
|
error: 'bg-[var(--color-error-light)] text-[var(--color-error-dark,#b91c1c)]',
|
|
brand: 'bg-[var(--color-brand-100)] text-[var(--color-brand-700)]',
|
|
};
|
|
|
|
export function Badge({ variant = 'default', className = '', children, ...props }: BadgeProps) {
|
|
return (
|
|
<span
|
|
{...props}
|
|
className={[
|
|
'inline-flex items-center rounded-[var(--radius-full)] px-2.5 py-0.5 text-xs font-medium',
|
|
variantClasses[variant], className,
|
|
].join(' ')}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|