Used Kbutton with right prop

Author: Prashant-thakur77

contentcuration/contentcuration/frontend/shared/views/StudioChip.vue

@@ -12,16 +12,19 @@
         </slot>
       </div>
 
-      <KIconButton
+      <button
         v-if="close"
         class="studio-chip__close"
         :aria-label="removeLabel"
-        icon="delete"
-        color="#999999"
-        appearance="flat-button"
         data-test="remove-chip"
         @click.stop="handleClose"
-      />
+      >
+        <KIcon
+          icon="delete"
+          class="studio-chip__icon"
+          :color="$themePalette.grey.v_400"
+        />
+      </button>
     </div>
   </div>
 
@@ -71,7 +74,7 @@
     height: 24px;
     min-height: 24px;
     padding: 2px 8px;
-    margin: 2px;
+    margin: 2px 4px;
     font-size: 13px;
     white-space: nowrap;
     cursor: default;
@@ -94,11 +97,26 @@
   }
 
   .studio-chip__close {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 16px;
     height: 16px;
-    min-height: 16px;
     padding: 0;
     margin-top: 2px;
+    margin-left: 2px;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
+  .studio-chip__icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    font-size: 18px;
+    transition: color 0.2s ease;
+    transform: translate(-50%, -50%);
   }
 
 </style>