diff --git a/packages/bbui/src/Tags/Tag.svelte b/packages/bbui/src/Tags/Tag.svelte
index 6e1605982c..e186514376 100644
--- a/packages/bbui/src/Tags/Tag.svelte
+++ b/packages/bbui/src/Tags/Tag.svelte
@@ -1,11 +1,24 @@
-<div class="spectrum-Tags" role="list" aria-label="list">
-    <div class="spectrum-Tags-item" role="listitem">
-      <span class="spectrum-Tags-itemLabel">Tag 1</span>
-    </div>
-    <div class="spectrum-Tags-item is-invalid" role="listitem">
-      <span class="spectrum-Tags-itemLabel">Tag 2</span>
-    </div>
-    <div class="spectrum-Tags-item is-disabled" role="listitem">
-      <span class="spectrum-Tags-itemLabel">Tag 2</span>
-    </div>
-  </div>
\ No newline at end of file
+<script>
+  import Avatar from '../Avatar/Avatar.svelte'
+  import ClearButton from '../ClearButton/ClearButton.svelte'
+  export let icon = "";
+  export let avatar = "";
+  export let invalid = false;
+  export let disabled = false;
+  export let closable = false;
+</script>
+
+<div class:is-invalid={invalid} class:is-disabled={disabled} class="spectrum-Tags-item" role="listitem">
+  {#if avatar}
+    <Avatar url={avatar} />
+  {/if}
+  {#if icon}
+    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Tag">
+      <use xlink:href="#spectrum-icon-24-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Tags-itemLabel"><slot /></span>
+  {#if closable}
+     <ClearButton on:click />
+  {/if}
+</div>
\ No newline at end of file
diff --git a/packages/bbui/src/Tags/Tags.svelte b/packages/bbui/src/Tags/Tags.svelte
index e69de29bb2..8eecc1dbff 100644
--- a/packages/bbui/src/Tags/Tags.svelte
+++ b/packages/bbui/src/Tags/Tags.svelte
@@ -0,0 +1,7 @@
+<script>
+    import "@spectrum-css/tags/dist/index-vars.css"
+</script>
+
+<div class="spectrum-Tags" role="list" aria-label="list">
+    <slot />
+</div>
\ No newline at end of file