(".remove-button");
+
+ const eventPromise = oneEvent(el, "bl-tag-click");
+
+ removeBtn?.dispatchEvent(new Event("bl-click")); // Use bl-click event for bl-button
+
+ const { detail } = await eventPromise;
+
+ expect(detail).to.deep.equal({
+ value: "test",
+ selected: false
+ });
+ });
+ });
+});
diff --git a/src/components/tag/bl-tag.ts b/src/components/tag/bl-tag.ts
new file mode 100644
index 00000000..d5c4f33c
--- /dev/null
+++ b/src/components/tag/bl-tag.ts
@@ -0,0 +1,106 @@
+import { CSSResultGroup, html, LitElement, nothing, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { event, EventDispatcher } from "../../utilities/event";
+import "../button/bl-button";
+import "../icon/bl-icon";
+import { BaklavaIcon } from "../icon/icon-list";
+import style from "./bl-tag.css";
+
+export type TagSize = "small" | "medium" | "large";
+type TagVariant = "selectable" | "removable";
+
+/**
+ * @tag bl-tag
+ * @summary Baklava Tag component
+ */
+
+@customElement("bl-tag")
+export default class BlTag extends LitElement {
+ static get styles(): CSSResultGroup {
+ return [style];
+ }
+
+ @query(".remove-button") removeButton!: HTMLButtonElement;
+
+ /**
+ * Sets the tag size
+ */
+ @property({ type: String, reflect: true })
+ size: TagSize = "medium";
+
+ @property({ type: String, reflect: true })
+ variant: TagVariant = "selectable";
+
+ @property({ type: Boolean, reflect: true })
+ selected = false;
+
+ @property({ type: Boolean, reflect: true })
+ disabled = false;
+
+ @property({ type: String, reflect: true })
+ value: string | null = null;
+
+ @event("bl-tag-click") private _onBlTagClick: EventDispatcher<{
+ value: string | null;
+ selected: boolean;
+ }>;
+
+ private handleClick = () => {
+ if (this.variant === "selectable") this.selected = !this.selected;
+ this._onBlTagClick({ selected: this.selected, value: this.value });
+ };
+
+ /**
+ * Sets the name of the icon
+ */
+ @property({ type: String })
+ icon?: BaklavaIcon;
+
+ render(): TemplateResult {
+ const removeIconSize = this.size === "large" ? "medium" : "small";
+ const icon = this.icon
+ ? html``
+ : nothing;
+
+ const removeButton =
+ this.variant === "removable"
+ ? html`
+
+ `
+ : nothing;
+
+ const selectableVariant = html``;
+
+ const removableVariant = html`
+ ${icon}
+
+ ${removeButton}
+
`;
+
+ return this.variant === "selectable" ? selectableVariant : removableVariant;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "bl-tag": BlTag;
+ }
+}
diff --git a/src/components/tag/doc/ADR.md b/src/components/tag/doc/ADR.md
new file mode 100644
index 00000000..064f152e
--- /dev/null
+++ b/src/components/tag/doc/ADR.md
@@ -0,0 +1,66 @@
+## Figma Design Document
+
+https://www.figma.com/design/lSvX6Qe0jc8b4CaIK7egXR/Baklava-Component-Library?node-id=21476-4839&node-type=frame&t=PriuJR3qmpVaFIdy-0
+
+## Implementation
+
+General usage example:
+
+```html
+In Progress
+```
+
+### Usage Examples
+Selectable variant usage:
+```html
+Selectable tag
+```
+The removable variant can be set like this:
+
+```js
+
+const handleTagClick=(event)=>{
+ tags.filter((tag)=>tag.value!==event.value)
+}
+Removable tag
+```
+
+The icon can be set like this:
+
+```html
+Default
+```
+
+The size and disabled attributes can be set like this:
+
+```html
+In Progress
+```
+
+## API Reference:
+
+#### Slots
+
+| Name | Description | Default Content |
+|-------------|-----------------| --------------- |
+| `icon` slot | Icon of the tag | - |
+
+#### Attributes
+
+| Attribute | Description | Default Value |
+|----------------------|-----------------------------------------------|---------------|
+| size (`string`) | Size of tag(`small`,`medium`,`large`) | medium |
+| icon (`bl-icon`) | Name of the icon that will be shown in tag | - |
+| variant (`string`) | Variants of the tag(`selectable`,`removable`) | selectable |
+| disabled (`boolean`) | Makes tag disabled | false |
+| selected (`boolean`) | Makes tag selected | false |
+| value (`string`) | Sets tags value | - |
+
+
+
+### Events
+
+| Name | Description | Payload |
+|----------------|----------------------------|-----------------------------------|
+| `bl-tag-click` | Fires when tag is clicked | `{value:string,selected:boolean}` |
+