diff --git a/packages/react-components/src/components/Tag/Tag.css b/packages/react-components/src/components/Tag/Tag.css
index 3225e179..e665a1fe 100644
--- a/packages/react-components/src/components/Tag/Tag.css
+++ b/packages/react-components/src/components/Tag/Tag.css
@@ -1,13 +1,10 @@
 .bcds-react-aria-Tag {
   color: var(--typography-color-primary);
   cursor: pointer;
-  border-radius: var(--layout-margin-hair);
   border: var(--layout-border-width-small) solid;
   display: flex;
   align-items: center;
-  gap: var(--layout-margin-small);
   font: var(--typography-regular-label);
-  padding: var(--layout-padding-hair) var(--layout-padding-small);
   width: fit-content;
 }
 .bcds-react-aria-Tag .react-aria-Button {
@@ -63,6 +60,26 @@
   border-color: var(--support-border-color-warning);
 }
 
+/* Tag style */
+.bcds-react-aria-Tag.rectangular {
+  border-radius: var(--layout-border-radius-small);
+}
+.bcds-react-aria-Tag.circular {
+  border-radius: var(--layout-borderRadius-Circular, 9999px);
+}
+
+/* Tag size */
+.bcds-react-aria-Tag.medium {
+  height: var(--layout-padding-xlarge);
+  padding: var(--layout-padding-hair) var(--layout-padding-medium);
+  gap: var(--layout-margin-medium);
+}
+.bcds-react-aria-Tag.small {
+  height: var(--layout-padding-large);
+  padding: var(--layout-padding-hair) var(--layout-padding-small);
+  gap: var(--layout-margin-small);
+}
+
 /* Selected */
 .bcds-react-aria-Tag[data-selected] {
   border-radius: var(--layout-border-radius-small);
diff --git a/packages/react-components/src/components/Tag/Tag.tsx b/packages/react-components/src/components/Tag/Tag.tsx
index 99693eb2..c5f25bc2 100644
--- a/packages/react-components/src/components/Tag/Tag.tsx
+++ b/packages/react-components/src/components/Tag/Tag.tsx
@@ -25,12 +25,27 @@ export interface TagProps extends ReactAriaTagProps {
     | "green"
     | "red"
     | "yellow";
+  /**
+   * tagStyle
+   */
+  tagStyle?: "rectangular" | "circular";
+  /**
+   * size
+   */
+  size?: "small" | "medium";
 }
 
-export default function Tag({ color = "blue", icon, id, textValue }: TagProps) {
+export default function Tag({
+  color = "blue",
+  tagStyle = "rectangular",
+  size = "small",
+  icon,
+  id,
+  textValue,
+}: TagProps) {
   return (
     <ReactAriaTag
-      className={`bcds-react-aria-Tag ${color}`}
+      className={`bcds-react-aria-Tag ${color} ${tagStyle} ${size}`}
       id={id}
       textValue={textValue}
     >
diff --git a/packages/react-components/src/stories/Tag.stories.tsx b/packages/react-components/src/stories/Tag.stories.tsx
index 9635450f..d6abc55a 100644
--- a/packages/react-components/src/stories/Tag.stories.tsx
+++ b/packages/react-components/src/stories/Tag.stories.tsx
@@ -23,6 +23,8 @@ export const SingleTag: Story = {
   args: {
     id: "single-tag",
     color: "blue",
+    tagStyle: "rectangular",
+    size: "small",
     textValue: "Single tag",
   },
   render: (args: TagProps) => (
diff --git a/packages/react-components/src/stories/TagGroup.mdx b/packages/react-components/src/stories/TagGroup.mdx
index fffb3ffd..c1893363 100644
--- a/packages/react-components/src/stories/TagGroup.mdx
+++ b/packages/react-components/src/stories/TagGroup.mdx
@@ -53,6 +53,24 @@ A TagGroup should have either a `label` (rendered on top of the `TagList`) or an
 
 <Canvas of={TagGroupStories.MultipleTags} />
 
+### Styled tags
+
+The `Tag` component can be passed a `tagStyle` prop with one of the following values:
+
+- `rectangular`
+- `circular`
+
+If no value is passed, the tag tagStyle defaults to `rectangular`.
+
+The `Tag` component can be passed a `size` prop with one of the following values:
+
+- `small`
+- `medium`
+
+If no value is passed, the tag size defaults to `small`.
+
+<Canvas of={TagGroupStories.MultipleTagsInEachStyle} />
+
 ### Coloured tags
 
 The `Tag` component can be passed a `color` prop with one of the following values:
@@ -69,7 +87,9 @@ The `Tag` component can be passed a `color` prop with one of the following value
 If no value is passed, the tag colour defaults to `blue`.
 
 <Canvas of={TagGroupStories.MultipleTagsInEachColor} />
+<Canvas of={TagGroupStories.MultipleCircularTagsInEachColor} />
 <Canvas of={TagGroupStories.ColorsRemovable} />
+<Canvas of={TagGroupStories.CircularColorsRemovable} />
 
 ### Tags with icons
 
diff --git a/packages/react-components/src/stories/TagGroup.stories.tsx b/packages/react-components/src/stories/TagGroup.stories.tsx
index dab9d815..14514620 100644
--- a/packages/react-components/src/stories/TagGroup.stories.tsx
+++ b/packages/react-components/src/stories/TagGroup.stories.tsx
@@ -162,6 +162,104 @@ export const MultipleTagsInEachColor: Story = {
   },
 };
 
+export const MultipleCircularTagsInEachColor: Story = {
+  render: (args) => {
+    return (
+      <TagGroup label="Colored circular tags" {...args}>
+        <TagList
+          items={[
+            {
+              id: "bc-blue-circular-tag",
+              color: "bc-blue",
+              tagStyle: "circular",
+              textValue: "BC Blue tag",
+            },
+            {
+              id: "bc-gold-circular-tag",
+              color: "bc-gold",
+              tagStyle: "circular",
+              textValue: "BC Gold tag",
+            },
+            {
+              id: "dark-circular-tag",
+              color: "dark",
+              tagStyle: "circular",
+              textValue: "Dark tag",
+            },
+            {
+              id: "blue-circular-tag",
+              color: "blue",
+              tagStyle: "circular",
+              textValue: "Blue tag",
+            },
+            {
+              id: "green-circular-tag",
+              color: "green",
+              tagStyle: "circular",
+              textValue: "Green tag",
+            },
+            {
+              id: "yellow-circular-tag",
+              color: "yellow",
+              tagStyle: "circular",
+              textValue: "Yellow tag",
+            },
+            {
+              id: "red-circular-tag",
+              color: "red",
+              tagStyle: "circular",
+              textValue: "Red tag",
+            },
+            {
+              id: "grey-circular-tag",
+              color: "grey",
+              tagStyle: "circular",
+              textValue: "Grey tag",
+            },
+          ]}
+        />
+      </TagGroup>
+    );
+  },
+};
+
+export const MultipleTagsInEachStyle: Story = {
+  render: (args) => {
+    return (
+      <TagGroup label="Styled tags" {...args}>
+        <TagList
+          items={[
+            {
+              id: "rectagular-small-tag",
+              tagStyle: "rectangular",
+              size: "small",
+              textValue: "Rectangular small tag",
+            },
+            {
+              id: "rectagular-medium-tag",
+              tagStyle: "rectangular",
+              size: "medium",
+              textValue: "Rectangular medium tag",
+            },
+            {
+              id: "circular-small-tag",
+              tagStyle: "circular",
+              size: "small",
+              textValue: "Circular small tag",
+            },
+            {
+              id: "circular-medium-tag",
+              tagStyle: "circular",
+              size: "medium",
+              textValue: "Circular medium tag",
+            },
+          ]}
+        />
+      </TagGroup>
+    );
+  },
+};
+
 export const ColorsRemovable: Story = {
   ...MultipleTagsInEachColor,
   args: {
@@ -169,6 +267,13 @@ export const ColorsRemovable: Story = {
   },
 };
 
+export const CircularColorsRemovable: Story = {
+  ...MultipleCircularTagsInEachColor,
+  args: {
+    onRemove: () => alert("onRemove()"),
+  },
+};
+
 export const EmptyTagGroup: Story = {
   render: () => (
     <TagGroup aria-label="Empty tag group">