diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 4c564958..66087abf 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3640,12 +3640,13 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :-------- | :----- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| close | dispatched | -- |
## `TagSkeleton`
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 67d35712..74ccddda 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -7859,7 +7859,8 @@
{ "type": "forwarded", "name": "click", "element": "TagSkeleton" },
{ "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" },
{ "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" },
- { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" }
+ { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" },
+ { "type": "dispatched", "name": "close" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div | span" }
diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx
index 42b18770..19bc9b81 100644
--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@@ -25,7 +25,7 @@
### Filterable
-Filterable
+Filterable
### Custom icon
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index d5bcb159..747cfdd7 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -30,6 +30,10 @@
import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
import TagSkeleton from "./TagSkeleton.svelte";
+
+ import { createEventDispatcher } from "svelte";
+
+ const dispatch = createEventDispatcher();
{#if skeleton}
@@ -70,6 +74,9 @@
disabled="{disabled}"
title="{title}"
on:click|stopPropagation
+ on:click|stopPropagation="{() => {
+ dispatch('close');
+ }}"
on:mouseover
on:mouseenter
on:mouseleave
diff --git a/tests/Tag.test.svelte b/tests/Tag.test.svelte
index 7e5cc57e..25524fdf 100644
--- a/tests/Tag.test.svelte
+++ b/tests/Tag.test.svelte
@@ -27,7 +27,7 @@
high-contrast
-Filterable
+Filterable
Custom icon
diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts
index 20d122dc..010de5fb 100644
--- a/types/Tag/Tag.d.ts
+++ b/types/Tag/Tag.d.ts
@@ -65,5 +65,6 @@ export default class Tag {
$on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
$on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
$on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "close", cb: (event: CustomEvent) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}