diff --git a/packages/react/lib/Tag/index.js b/packages/react/lib/Tag/index.js
index f39297769..630c0a6d9 100644
--- a/packages/react/lib/Tag/index.js
+++ b/packages/react/lib/Tag/index.js
@@ -2,6 +2,8 @@ import { forwardRef, useImperativeHandle, useRef } from 'react';
import { classNames } from '@junipero/core';
import PropTypes from 'prop-types';
+import { Remove } from '../icons';
+
const Tag = forwardRef(({
className,
children,
@@ -31,7 +33,7 @@ const Tag = forwardRef(({
>
{ content }
{ onDelete && (
-
+
) }
);
diff --git a/packages/react/lib/Tag/index.test.js.snap b/packages/react/lib/Tag/index.test.js.snap
index a596f5cc3..4c5f33ee7 100644
--- a/packages/react/lib/Tag/index.test.js.snap
+++ b/packages/react/lib/Tag/index.test.js.snap
@@ -8,9 +8,19 @@ exports[` should be deletable 1`] = `
Item 1
-
+
should be deletable 1`] = `
Item 2
-
+
should be deletable 1`] = `
Item 3
-
+
`;
exports[` should be deletable 2`] = `
+
+
+ Item 1
+
+
+
Item 2
-
+
should be deletable 2`] = `
Item 3
-
+
`;
diff --git a/packages/theme/lib/Tag.sass b/packages/theme/lib/Tag.sass
index 003896486..d4101aba7 100644
--- a/packages/theme/lib/Tag.sass
+++ b/packages/theme/lib/Tag.sass
@@ -8,6 +8,8 @@
color: var(--text-color)
display: inline-flex
align-items: center
+ align-content: center
+ gap: 8px
&.primary
--background-color: var(--junipero-velvet)
@@ -25,27 +27,7 @@
--background-color: var(--junipero-lime)
--text-color: var(--junipero-seashell)
- .delete
- cursor: pointer
- position: relative
- margin-left: 8px
- width: 10px
- height: 10px
- display: inline-flex
-
- &::before, &::after
- width: 2px
- height: 10px
- border-radius: 2px
- background: var(--text-color)
- content: ""
- display: block
- position: absolute
- top: 0
- left: 50%
+ .remove
+ --icons-color: var(--text-color)
- &::before
- transform: rotate(45deg)
-
- &::after
- transform: rotate(-45deg)
+ cursor: pointer