diff --git a/components/tags/src/vwc-tag-base.ts b/components/tags/src/vwc-tag-base.ts
index 8583bb0da..23b3c9bbe 100644
--- a/components/tags/src/vwc-tag-base.ts
+++ b/components/tags/src/vwc-tag-base.ts
@@ -8,6 +8,7 @@ import type { ClassInfo } from 'lit-html/directives/class-map.js';
import {
LitElement, html, property, TemplateResult, queryAsync, state, query, eventOptions
} from 'lit-element';
+import { nothing } from 'lit-html';
type TagConnotation = Extract<
@@ -44,6 +45,9 @@ export class VWCTagBase extends LitElement {
@property({ type: Boolean, reflect: true })
selectable = false;
+ @property({ type: Boolean, reflect: true })
+ removable = false;
+
@state() protected shouldRenderRipple = false;
protected rippleHandlers = new RippleHandlers(() => {
@@ -120,11 +124,18 @@ export class VWCTagBase extends LitElement {
`;
}
+ protected renderRemoveButton(): TemplateResult {
+ return html``;
+ }
+
override render(): TemplateResult {
return this.selectable
? this.renderTagSelectable()
: html`
${this.text}
+ ${this.removable ? this.renderRemoveButton() : nothing}
`;
}
diff --git a/components/tags/src/vwc-tag.scss b/components/tags/src/vwc-tag.scss
index 141bc5756..b275efeb1 100644
--- a/components/tags/src/vwc-tag.scss
+++ b/components/tags/src/vwc-tag.scss
@@ -83,6 +83,7 @@
&.vwc-tag--selected {
&.layout-outlined {
+ border-color: var(#{layout.$vvd-layout-color-outline});
background-color: var(#{connotation.$vvd-color-connotation}-soft);
color: var(#{connotation.$vvd-color-connotation}-contrast);
}
@@ -105,6 +106,7 @@
}
> .vwc-tag__icon {
+ #{connotation.$vvd-color-connotation}: initial;
block-size: var(#{tags-variables.$namespace-icon-checkmark--size});
inline-size: var(#{tags-variables.$namespace-icon-checkmark--size});
@@ -126,3 +128,11 @@
// }
// }
+.remove-button {
+ all: unset;
+ margin-inline-start: 10px;
+
+ .vwc-tag__icon {
+ --vvd-icon-size: 12px;
+ }
+}
diff --git a/components/tags/stories/tag.stories.js b/components/tags/stories/tag.stories.js
index 4f7c71abd..643324594 100644
--- a/components/tags/stories/tag.stories.js
+++ b/components/tags/stories/tag.stories.js
@@ -25,3 +25,6 @@ Outlined.args = { text: 'Outlined', layout: 'outlined' };
export const Selected = Template.bind({});
Selected.args = { text: 'Selected', selectable: true, selected: true };
+
+export const Removable = Template.bind({});
+Removable.args = { text: 'Removable', Removable: true };
diff --git a/ui-tests/snapshots/vwc-tags.png b/ui-tests/snapshots/vwc-tags.png
index 6f4ec6d9e..7546c0651 100644
Binary files a/ui-tests/snapshots/vwc-tags.png and b/ui-tests/snapshots/vwc-tags.png differ