diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index a61e7263..847f3c81 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4029,17 +4029,17 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
-| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | Specify the type of tag |
-| size | let | No | "sm" | "default" | "default" | -- |
-| filter | let | No | boolean | false | Set to `true` to use filterable variant |
-| disabled | let | No | boolean | false | Set to `true` to disable a filterable tag |
-| interactive | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` |
-| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
-| title | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag |
-| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
+| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline" | -- | Specify the type of tag |
+| size | let | No | "sm" | "default" | "default" | -- |
+| filter | let | No | boolean | false | Set to `true` to use filterable variant |
+| disabled | let | No | boolean | false | Set to `true` to disable a filterable tag |
+| interactive | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` |
+| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
+| title | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag |
+| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 0d746ed7..8748100f 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -11027,7 +11027,7 @@
"name": "type",
"kind": "let",
"description": "Specify the type of tag",
- "type": "\"red\" | \"magenta\" | \"purple\" | \"blue\" | \"cyan\" | \"teal\" | \"green\" | \"gray\" | \"cool-gray\" | \"warm-gray\" | \"high-contrast\"",
+ "type": "\"red\" | \"magenta\" | \"purple\" | \"blue\" | \"cyan\" | \"teal\" | \"green\" | \"gray\" | \"cool-gray\" | \"warm-gray\" | \"high-contrast\" | \"outline\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx
index d4832c67..19008caf 100644
--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@@ -25,6 +25,7 @@
cool-gray
warm-gray
high-contrast
+outline
### Filterable
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index c2069f83..383fb646 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -3,7 +3,7 @@
/**
* Specify the type of tag
- * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"}
+ * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline"}
*/
export let type = undefined;
@@ -70,6 +70,7 @@
class:bx--tag--cool-gray="{type === 'cool-gray'}"
class:bx--tag--warm-gray="{type === 'warm-gray'}"
class:bx--tag--high-contrast="{type === 'high-contrast'}"
+ class:bx--tag--outline="{type === 'outline'}"
{...$$restProps}
>
@@ -112,6 +113,7 @@
class:bx--tag--cool-gray="{type === 'cool-gray'}"
class:bx--tag--warm-gray="{type === 'warm-gray'}"
class:bx--tag--high-contrast="{type === 'high-contrast'}"
+ class:bx--tag--outline="{type === 'outline'}"
{...$$restProps}
on:click
on:mouseover
@@ -144,6 +146,7 @@
class:bx--tag--cool-gray="{type === 'cool-gray'}"
class:bx--tag--warm-gray="{type === 'warm-gray'}"
class:bx--tag--high-contrast="{type === 'high-contrast'}"
+ class:bx--tag--outline="{type === 'outline'}"
{...$$restProps}
on:click
on:mouseover
diff --git a/tests/Tag.test.svelte b/tests/Tag.test.svelte
index 9396c8b9..5f4f5a33 100644
--- a/tests/Tag.test.svelte
+++ b/tests/Tag.test.svelte
@@ -27,6 +27,8 @@
high-contrast
+outline
+
Filterable
Custom icon
diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts
index f9d1ed8d..273abba5 100644
--- a/types/Tag/Tag.d.ts
+++ b/types/Tag/Tag.d.ts
@@ -18,7 +18,8 @@ export interface TagProps
| "gray"
| "cool-gray"
| "warm-gray"
- | "high-contrast";
+ | "high-contrast"
+ | "outline";
/**
* @default "default"