Project Initialization

packages/ui-common/src/components/Badge/Badge.tsx

@@ -0,0 +1,31 @@
+import { HTMLAttributes } from 'react';
+import clsx from 'clsx';
+
+export type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: BadgeTone;
+}
+
+const toneClasses: Record<BadgeTone, string> = {
+  neutral: 'bg-gray-100 text-gray-700',
+  success: 'bg-green-100 text-green-700',
+  warning: 'bg-amber-100 text-amber-800',
+  danger: 'bg-red-100 text-red-700',
+  info: 'bg-sky-100 text-sky-700',
+};
+
+const Badge = ({ tone = 'neutral', className, children, ...rest }: BadgeProps) => (
+  <span
+    className={clsx(
+      'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+      toneClasses[tone],
+      className,
+    )}
+    {...rest}
+  >
+    {children}
+  </span>
+);
+
+export default Badge;

packages/ui-common/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Badge';
+export type { BadgeProps, BadgeTone } from './Badge';