diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 068b9ebd..22d8359e 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4041,6 +4041,17 @@ None.
| title | let
| No | string
| "Clear filter"
| Set the title for the close button in a filterable tag |
| icon | let
| No | typeof import("svelte").SvelteComponent
| -- | 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 e201e2ae..358f6fe5 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -11037,7 +11037,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 a9c361f2..d232ccb6 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 121612e1..4172d642 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"