[ui][badge] allow icon addon

apps/storybook/stories/badge.stories.tsx

@@ -1,4 +1,11 @@
 import React from 'react';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  StarIcon,
+} from '@heroicons/react/20/solid';
 import type { ComponentMeta } from '@storybook/react';
 import type { BadgeVariant } from '@tih/ui';
 import { Badge } from '@tih/ui';
@@ -40,3 +47,23 @@ export function Variants() {
     </div>
   );
 }
+
+export function Icon() {
+  return (
+    <div className="space-x-4">
+      <Badge endAddOn={StarIcon} label="Primary" variant="primary" />
+      <Badge endAddOn={CheckCircleIcon} label="Success" variant="success" />
+      <Badge
+        endAddOn={InformationCircleIcon}
+        label="Information"
+        variant="info"
+      />
+      <Badge
+        endAddOn={ExclamationTriangleIcon}
+        label="Warning"
+        variant="warning"
+      />
+      <Badge endAddOn={ExclamationCircleIcon} label="Danger" variant="danger" />
+    </div>
+  );
+}

packages/ui/src/Badge/Badge.tsx

@@ -8,6 +8,7 @@ export type BadgeVariant =
   | 'warning';
 
 type Props = Readonly<{
+  endAddOn?: React.ComponentType<React.ComponentProps<'svg'>>;
   label: string;
   variant: BadgeVariant;
 }>;
@@ -41,7 +42,7 @@ const classes: Record<
   },
 };
 
-export default function Badge({ label, variant }: Props) {
+export default function Badge({ endAddOn: EndAddOn, label, variant }: Props) {
   const { backgroundClass, textClass } = classes[variant];
 
   return (
@@ -51,7 +52,8 @@ export default function Badge({ label, variant }: Props) {
         backgroundClass,
         textClass,
       )}>
-      {label}
+      <span>{label}</span>
+      {EndAddOn && <EndAddOn aria-hidden="true" className="ml-1 h-4 w-4" />}
     </span>
   );
 }