diff --git a/app/javascript/dashboard/components-next/ConversationWorkflow/AttributeBadge.vue b/app/javascript/dashboard/components-next/ConversationWorkflow/AttributeBadge.vue
new file mode 100644
index 000000000..41990cbc9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/ConversationWorkflow/AttributeBadge.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  type: { type: String, default: 'resolution' },
+});
+
+const colorClass = computed(() => {
+  const colorMap = {
+    'pre-chat': 'blue',
+    resolution: 'teal',
+  };
+  const color = colorMap[props.type] || colorMap.resolution;
+  return `text-n-${color}-11`;
+});
+
+const iconName = computed(() => {
+  const iconMap = {
+    'pre-chat': 'i-lucide-message-circle',
+    resolution: 'i-lucide-circle-check-big',
+  };
+  return iconMap[props.type] || iconMap.resolution;
+});
+
+const displayLabel = computed(() => {
+  const labelMap = {
+    'pre-chat': 'Pre-chat',
+    resolution: 'Resolution',
+  };
+  return labelMap[props.type] || labelMap.resolution;
+});
+</script>
+
+<template>
+  <div
+    class="flex gap-1 justify-center items-center px-1.5 py-1 rounded-md shadow outline-1 outline outline-n-container bg-n-solid-2"
+  >
+    <Icon :icon="iconName" class="size-4" :class="colorClass" />
+    <span class="text-sm" :class="colorClass">{{ displayLabel }}</span>
+  </div>
+</template>