Support Tag icon on right

src/tag/tag.tsx

@@ -7,6 +7,7 @@ export const Tag = ({
     children,
     interactive = false,
     icon,
+    iconPosition = "left",
     ...otherProps
 }: TagProps): JSX.Element => {
     return (
@@ -17,8 +18,9 @@ export const Tag = ({
             $interactive={interactive}
             {...otherProps}
         >
-            {icon}
+            {iconPosition === "left" && icon}
             <Label>{children}</Label>
+            {iconPosition === "right" && icon}
         </Wrapper>
     );
 };

src/tag/types.ts

@@ -13,5 +13,6 @@ export interface TagProps extends React.HTMLAttributes<HTMLElement> {
     type: TagType;
     colorType?: TagColorType | undefined;
     icon?: JSX.Element | undefined;
+    iconPosition?: "left" | "right";
     interactive?: boolean | undefined;
 }

stories/tag/props-table.tsx

@@ -52,6 +52,13 @@ const DATA: ApiTableSectionProps[] = [
                 description: "A component to be displayed as the icon",
                 propTypes: ["JSX.Element"],
             },
+            {
+                name: "iconPosition",
+                description:
+                    "The position of the icon relative to the label text",
+                propTypes: [`"left"`, `"right"`],
+                defaultValue: `"left"`,
+            },
             {
                 name: "interactive",
                 description: <>Specifies if the tag is interactive</>,

stories/tag/tag.stories.tsx

@@ -52,22 +52,21 @@ export const WithIcon: StoryObj<Component> = {
         return (
             <Wrapper>
                 <Tag
-                    type="solid"
-                    colorType="blue"
+                    type="outline"
                     icon={<PlusCircleFillIcon />}
-                    data-testid="first-example"
-                    interactive={true}
+                    interactive
                     onClick={() => window.alert("Interactive tag clicked!")}
                 >
-                    Some Label
+                    Icon on left
                 </Tag>
                 <Tag
-                    type="outline"
-                    colorType="blue"
-                    icon={<PlaceholderIcon />}
-                    data-testid="second-example"
+                    type="solid"
+                    icon={<PlusCircleFillIcon />}
+                    iconPosition="right"
+                    interactive
+                    onClick={() => window.alert("Interactive tag clicked!")}
                 >
-                    Some Label
+                    Icon on right
                 </Tag>
             </Wrapper>
         );