[ui][badge] add startAddOn

apps/storybook/stories/badge.stories.tsx

@@ -48,7 +48,31 @@ export function Variants() {
   );
 }
 
-export function Icon() {
+export function StartIcon() {
+  return (
+    <div className="space-x-4">
+      <Badge label="Primary" startAddOn={StarIcon} variant="primary" />
+      <Badge label="Success" startAddOn={CheckCircleIcon} variant="success" />
+      <Badge
+        label="Information"
+        startAddOn={InformationCircleIcon}
+        variant="info"
+      />
+      <Badge
+        label="Warning"
+        startAddOn={ExclamationTriangleIcon}
+        variant="warning"
+      />
+      <Badge
+        label="Danger"
+        startAddOn={ExclamationCircleIcon}
+        variant="danger"
+      />
+    </div>
+  );
+}
+
+export function EndIcon() {
   return (
     <div className="space-x-4">
       <Badge endAddOn={StarIcon} label="Primary" variant="primary" />

packages/ui/src/Badge/Badge.tsx

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