diff --git a/packages/react/src/components/dropdown-list/dropdown-list.tsx b/packages/react/src/components/dropdown-list/dropdown-list.tsx
index a0327c7378..aef7d4d814 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.tsx
+++ b/packages/react/src/components/dropdown-list/dropdown-list.tsx
@@ -95,7 +95,7 @@ const TagWrapper = styled.div`
 
 const ListBoxTag = styled(Tag)`
     margin: 2px;
-    
+
     & + & {
         margin-left: 2px;
     }
@@ -431,7 +431,7 @@ export const DropdownList: VoidFunctionComponent<DropdownListProps<boolean | und
             aria-hidden="true"
             data-testid={`listboxtag-${option.value}`}
             key={option.value}
-            onDelete={handleTagRemove}
+            onRemove={handleTagRemove}
             value={{ id: option.value, label: option.label }}
         />
     ));
diff --git a/packages/react/src/components/tag/tag.test.tsx b/packages/react/src/components/tag/tag.test.tsx
index be6779b045..866e89c8ac 100644
--- a/packages/react/src/components/tag/tag.test.tsx
+++ b/packages/react/src/components/tag/tag.test.tsx
@@ -6,98 +6,90 @@ import { Tag, TagProps } from './tag';
 
 describe('Tag', () => {
     const tagSizes: TagProps['size'][] = ['small', 'medium'];
-    tagSizes.forEach((size) => {
-        describe(`Tag ${size}`, () => {
-            it('should call onClick callback when tag is clicked', () => {
-                const callback = jest.fn();
-                const wrapper = shallow(
-                    <Tag size={size} value={{ label: 'Test' }} onClick={callback} />,
-                );
-
-                wrapper.simulate('click');
-
-                expect(callback).toHaveBeenCalledTimes(1);
-            });
-
-            it('should call onDelete callback when delete-button is clicked', () => {
-                const callback = jest.fn();
-                const stopPropagation = jest.fn();
-                const wrapper = shallow(
-                    <Tag size={size} value={{ label: 'Test' }} onDelete={callback} />,
-                );
-
-                getByTestId(wrapper, 'Test-delete-button').simulate('click', { stopPropagation });
-
-                expect(callback).toHaveBeenCalledTimes(1);
-            });
-
-            it(
-                'should have aria-hidden="false" and an aria-label on icon when the label is not the same as iconName',
-                () => {
-                    const wrapper = shallow(
-                        <Tag size={size} iconName="home" value={{ label: 'Test' }} />,
-                    );
-
-                    const testIconWrapper = getByTestId(wrapper, 'Test-icon');
-                    expect(testIconWrapper.prop('aria-label')).toBe('home');
-                    expect(testIconWrapper.prop('aria-hidden')).toBe(false);
-                },
-            );
+    const tagColors: TagProps['color'][] = ['default', 'decorative-01', 'decorative-02'];
 
-            it(
-                'should have aria-hidden="true" and no label on icon when the label is the same as the iconName',
-                () => {
+    tagSizes.forEach((size) => {
+        tagColors.forEach((color) => {
+            describe(`Tag size=${size} color=${color}`, () => {
+                it('should call onRemove callback when delete-button is clicked', () => {
+                    const callback = jest.fn();
+                    const stopPropagation = jest.fn();
                     const wrapper = shallow(
-                        <Tag size={size} iconName="home" value={{ label: 'Home' }} />,
+                        <Tag size={size} color={color} value={{ label: 'Test' }} onRemove={callback} />,
                     );
 
-                    const testIconWrapper = getByTestId(wrapper, 'Home-icon');
-                    expect(testIconWrapper.prop('aria-label')).toBe(undefined);
-                    expect(testIconWrapper.prop('aria-hidden')).toBe(true);
-                },
-            );
-
-            (['mobile', 'desktop'] as DeviceType[]).forEach((deviceType) => {
-                it(`matches snapshot (${deviceType})`, () => {
-                    const tree = renderWithProviders(<Tag size={size} value={{ label: 'Test' }} />, 'desktop');
-
-                    expect(tree).toMatchSnapshot();
-                });
-
-                it(`matches snapshot (${deviceType})`, () => {
-                    const tree = renderWithProviders(<Tag size={size} value={{ label: 'Test' }} />, 'mobile');
-
-                    expect(tree).toMatchSnapshot();
-                });
-
-                it(`matches snapshot (${deviceType} with icons)`, () => {
-                    const tree = renderWithProviders(<Tag size={size} iconName="home" value={{ label: 'Test' }} />);
+                    getByTestId(wrapper, 'Test-remove-button').simulate('click', { stopPropagation });
 
-                    expect(tree).toMatchSnapshot();
+                    expect(callback).toHaveBeenCalledTimes(1);
                 });
 
-                it(`matches snapshot (${deviceType} deletable)`, () => {
-                    const tree = renderWithProviders(
-                        <Tag
-                            size={size}
-                            value={{ label: 'Test' }}
-                            onDelete={jest.fn()}
-                        />,
-                    );
-
-                    expect(tree).toMatchSnapshot();
-                });
+                it(
+                    'should have aria-hidden="false" and an icon aria-label when label is not the same as iconName',
+                    () => {
+                        const wrapper = shallow(
+                            <Tag size={size} color={color} iconName="home" value={{ label: 'Test' }} />,
+                        );
+
+                        const testIconWrapper = getByTestId(wrapper, 'Test-icon');
+                        expect(testIconWrapper.prop('aria-label')).toBe('home');
+                        expect(testIconWrapper.prop('aria-hidden')).toBe(false);
+                    },
+                );
 
-                it(`matches snapshot (${deviceType} clickable)`, () => {
-                    const tree = renderWithProviders(
-                        <Tag
-                            size={size}
-                            value={{ label: 'Test' }}
-                            onClick={jest.fn()}
-                        />,
-                    );
+                it(
+                    'should have aria-hidden="true" and no label on icon when the label is the same as the iconName',
+                    () => {
+                        const wrapper = shallow(
+                            <Tag size={size} color={color} iconName="home" value={{ label: 'Home' }} />,
+                        );
+
+                        const testIconWrapper = getByTestId(wrapper, 'Home-icon');
+                        expect(testIconWrapper.prop('aria-label')).toBe(undefined);
+                        expect(testIconWrapper.prop('aria-hidden')).toBe(true);
+                    },
+                );
 
-                    expect(tree).toMatchSnapshot();
+                (['mobile', 'desktop'] as DeviceType[]).forEach((deviceType) => {
+                    it(`matches snapshot (${deviceType})`, () => {
+                        const tree = renderWithProviders(
+                            <Tag
+                                size={size}
+                                color={color}
+                                value={{ label: 'Test' }}
+                            />,
+                            deviceType,
+                        );
+
+                        expect(tree).toMatchSnapshot();
+                    });
+
+                    it(`matches snapshot (${deviceType} with icons)`, () => {
+                        const tree = renderWithProviders(
+                            <Tag
+                                size={size}
+                                color={color}
+                                iconName="home"
+                                value={{ label: 'Test' }}
+                            />,
+                            deviceType,
+                        );
+
+                        expect(tree).toMatchSnapshot();
+                    });
+
+                    it(`matches snapshot (${deviceType} removable)`, () => {
+                        const tree = renderWithProviders(
+                            <Tag
+                                size={size}
+                                color={color}
+                                value={{ label: 'Test' }}
+                                onRemove={jest.fn()}
+                            />,
+                            deviceType,
+                        );
+
+                        expect(tree).toMatchSnapshot();
+                    });
                 });
             });
         });
diff --git a/packages/react/src/components/tag/tag.test.tsx.snap b/packages/react/src/components/tag/tag.test.tsx.snap
index 817a0d7620..846ce37dd7 100644
--- a/packages/react/src/components/tag/tag.test.tsx.snap
+++ b/packages/react/src/components/tag/tag.test.tsx.snap
@@ -1,74 +1,119 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tag Tag medium matches snapshot (desktop clickable) 1`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1.5rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c1 {
+exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop removable) 1`] = `
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius-3x);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: 0 var(--spacing-1x);
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.025rem;
+  -moz-letter-spacing: 0.025rem;
+  -ms-letter-spacing: 0.025rem;
+  letter-spacing: 0.025rem;
+  line-height: 1rem;
+  min-height: var(--size-2x);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-2x);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-.c0 + .c0 {
-  margin-left: var(--spacing-1x);
+.c3:focus {
+  outline: none;
 }
 
-.c1:hover {
-  background-color: #DBDEE1;
-  border-color: #60666E;
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c1:focus {
-  outline: none;
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1x);
+  width: var(--size-1x);
 }
 
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: var(--size-2x);
 }
 
-.c1:focus {
+.c4:focus {
   outline: none;
 }
 
-.c1:focus {
+.c4:focus {
   outline: none;
+  border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
 }
 
-<button
-  class="c0 c1"
-  type="button"
->
-  <span
-    class="c2"
-  >
-    Test
-  </span>
-</button>
-`;
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
+
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
 
-exports[`Tag Tag medium matches snapshot (desktop deletable) 1`] = `
 .c2 {
+  color: #220123;
   display: inline-block;
   font-size: 0.75rem;
   line-height: 1.5rem;
@@ -78,77 +123,34 @@ exports[`Tag Tag medium matches snapshot (desktop deletable) 1`] = `
   white-space: nowrap;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border-radius: 50%;
+  color: #220123;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: var(--size-1halfx);
+  height: auto;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   margin-left: var(--spacing-half);
-  width: var(--size-1halfx);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
 }
 
-.c4 > svg {
+.c5 > svg {
   height: 1rem;
   width: 1rem;
 }
 
-.c4:hover {
-  background-color: #DBDEE1;
-}
-
-.c4:focus {
-  outline: none;
-}
-
-.c4:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
-
-.c1 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius);
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  padding: 0 var(--spacing-1x);
-}
-
-.c0 + .c0 {
-  margin-left: var(--spacing-1x);
-}
-
-.c1 .c3 {
-  margin-right: calc(-1 * var(--spacing-half));
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
-
 <span
   class="c0 c1"
 >
@@ -158,50 +160,32 @@ exports[`Tag Tag medium matches snapshot (desktop deletable) 1`] = `
     Test
   </span>
   <button
+    aria-hidden="true"
     aria-label="deleteButtonAriaLabel"
-    class="c3 c4"
-    data-testid="Test-delete-button"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
     type="button"
   >
     <svg
       aria-hidden="true"
-      class=""
       color="currentColor"
       focusable="false"
-      height="12"
-      width="12"
+      height="16"
+      width="16"
     />
   </button>
 </span>
 `;
 
-exports[`Tag Tag medium matches snapshot (desktop with icons) 1`] = `
-.c2 {
-  color: #60666E;
-  height: var(--size-1x);
-  margin-right: var(--spacing-half);
-  vertical-align: text-bottom;
-  width: var(--size-1x);
-}
-
-.c3 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1.5rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
+exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop with icons) 1`] = `
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius);
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius-1halfx);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -213,14 +197,23 @@ exports[`Tag Tag medium matches snapshot (desktop with icons) 1`] = `
   margin-left: var(--spacing-1x);
 }
 
-.c1:focus {
-  outline: none;
+.c3 {
+  color: #220123;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+.c2 {
+  color: #220123;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
 }
 
 <span
@@ -232,6 +225,7 @@ exports[`Tag Tag medium matches snapshot (desktop with icons) 1`] = `
     class="c2"
     color="currentColor"
     data-testid="Test-icon"
+    focusable="true"
     height="12"
     role="img"
     width="12"
@@ -244,25 +238,15 @@ exports[`Tag Tag medium matches snapshot (desktop with icons) 1`] = `
 </span>
 `;
 
-exports[`Tag Tag medium matches snapshot (desktop) 1`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1.5rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
+exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop) 1`] = `
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius);
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius-1halfx);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -274,14 +258,15 @@ exports[`Tag Tag medium matches snapshot (desktop) 1`] = `
   margin-left: var(--spacing-1x);
 }
 
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+.c2 {
+  color: #220123;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 <span
@@ -295,66 +280,97 @@ exports[`Tag Tag medium matches snapshot (desktop) 1`] = `
 </span>
 `;
 
-exports[`Tag Tag medium matches snapshot (desktop) 2`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.875rem;
-  line-height: 1.875rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c1 {
+exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile removable) 1`] = `
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: 0 var(--spacing-1x);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.033125rem;
+  -moz-letter-spacing: 0.033125rem;
+  -ms-letter-spacing: 0.033125rem;
+  letter-spacing: 0.033125rem;
+  line-height: 1.5rem;
+  min-height: var(--size-3x);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-3x);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-.c0 + .c0 {
-  margin-left: var(--spacing-1x);
+.c3:focus {
+  outline: none;
+}
+
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
+}
+
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: var(--size-3x);
 }
 
-.c1:focus {
+.c4:focus {
   outline: none;
 }
 
-.c1:focus {
+.c4:focus {
   outline: none;
+  border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
 }
 
-<span
-  class="c0 c1"
->
-  <span
-    class="c2"
-  >
-    Test
-  </span>
-</span>
-`;
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
 
-exports[`Tag Tag medium matches snapshot (mobile clickable) 1`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1.5rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
 }
 
 .c1 {
@@ -362,9 +378,9 @@ exports[`Tag Tag medium matches snapshot (mobile clickable) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius-3x);
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius-1halfx);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -376,125 +392,45 @@ exports[`Tag Tag medium matches snapshot (mobile clickable) 1`] = `
   margin-left: var(--spacing-1x);
 }
 
-.c1:hover {
-  background-color: #DBDEE1;
-  border-color: #60666E;
+.c2 {
+  color: #220123;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
-
-<button
-  class="c0 c1"
-  type="button"
->
-  <span
-    class="c2"
-  >
-    Test
-  </span>
-</button>
-`;
-
-exports[`Tag Tag medium matches snapshot (mobile deletable) 1`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1.5rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border-radius: 50%;
+  color: #220123;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: var(--size-1halfx);
+  height: auto;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   margin-left: var(--spacing-half);
-  width: var(--size-1halfx);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
 }
 
-.c4 > svg {
+.c5 > svg {
   height: 1rem;
   width: 1rem;
 }
 
-.c4:hover {
-  background-color: #DBDEE1;
-}
-
-.c4:focus {
-  outline: none;
-}
-
-.c4:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
-
-.c1 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius);
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  padding: 0 var(--spacing-1x);
-}
-
-.c0 + .c0 {
-  margin-left: var(--spacing-1x);
-}
-
-.c1 .c3 {
-  margin-right: calc(-1 * var(--spacing-half));
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
-
 <span
   class="c0 c1"
 >
@@ -504,50 +440,32 @@ exports[`Tag Tag medium matches snapshot (mobile deletable) 1`] = `
     Test
   </span>
   <button
+    aria-hidden="true"
     aria-label="deleteButtonAriaLabel"
-    class="c3 c4"
-    data-testid="Test-delete-button"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
     type="button"
   >
     <svg
       aria-hidden="true"
-      class=""
       color="currentColor"
       focusable="false"
-      height="12"
-      width="12"
+      height="24"
+      width="24"
     />
   </button>
 </span>
 `;
 
-exports[`Tag Tag medium matches snapshot (mobile with icons) 1`] = `
-.c2 {
-  color: #60666E;
-  height: var(--size-1x);
-  margin-right: var(--spacing-half);
-  vertical-align: text-bottom;
-  width: var(--size-1x);
-}
-
-.c3 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1.5rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
+exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile with icons) 1`] = `
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius);
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius-1halfx);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -559,14 +477,23 @@ exports[`Tag Tag medium matches snapshot (mobile with icons) 1`] = `
   margin-left: var(--spacing-1x);
 }
 
-.c1:focus {
-  outline: none;
+.c3 {
+  color: #220123;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+.c2 {
+  color: #220123;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
 }
 
 <span
@@ -578,9 +505,10 @@ exports[`Tag Tag medium matches snapshot (mobile with icons) 1`] = `
     class="c2"
     color="currentColor"
     data-testid="Test-icon"
-    height="12"
+    focusable="true"
+    height="20"
     role="img"
-    width="12"
+    width="20"
   />
   <span
     class="c3"
@@ -590,25 +518,15 @@ exports[`Tag Tag medium matches snapshot (mobile with icons) 1`] = `
 </span>
 `;
 
-exports[`Tag Tag medium matches snapshot (mobile) 1`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1.5rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
+exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile) 1`] = `
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius);
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius-1halfx);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -620,14 +538,15 @@ exports[`Tag Tag medium matches snapshot (mobile) 1`] = `
   margin-left: var(--spacing-1x);
 }
 
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+.c2 {
+  color: #220123;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 <span
@@ -641,66 +560,97 @@ exports[`Tag Tag medium matches snapshot (mobile) 1`] = `
 </span>
 `;
 
-exports[`Tag Tag medium matches snapshot (mobile) 2`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.875rem;
-  line-height: 1.875rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c1 {
+exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop removable) 1`] = `
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: 0 var(--spacing-1x);
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.025rem;
+  -moz-letter-spacing: 0.025rem;
+  -ms-letter-spacing: 0.025rem;
+  letter-spacing: 0.025rem;
+  line-height: 1rem;
+  min-height: var(--size-2x);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-2x);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-.c0 + .c0 {
-  margin-left: var(--spacing-1x);
+.c3:focus {
+  outline: none;
+}
+
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: var(--size-2x);
 }
 
-.c1:focus {
+.c4:focus {
   outline: none;
 }
 
-.c1:focus {
+.c4:focus {
   outline: none;
+  border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
 }
 
-<span
-  class="c0 c1"
->
-  <span
-    class="c2"
-  >
-    Test
-  </span>
-</span>
-`;
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
 
-exports[`Tag Tag small matches snapshot (desktop clickable) 1`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1x);
+  width: var(--size-1x);
 }
 
 .c1 {
@@ -708,137 +658,2019 @@ exports[`Tag Tag small matches snapshot (desktop clickable) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius-2x);
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius-1halfx);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: 0 var(--spacing-half);
+  padding: 0 var(--spacing-1x);
 }
 
 .c0 + .c0 {
   margin-left: var(--spacing-1x);
 }
 
-.c1:hover {
-  background-color: #DBDEE1;
-  border-color: #60666E;
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
-
-<button
-  class="c0 c1"
-  type="button"
->
-  <span
-    class="c2"
-  >
-    Test
-  </span>
-</button>
-`;
-
-exports[`Tag Tag small matches snapshot (desktop deletable) 1`] = `
 .c2 {
+  color: #7D520B;
   display: inline-block;
   font-size: 0.75rem;
-  line-height: 1rem;
+  line-height: 1.5rem;
   max-width: 312px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c4 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border-radius: 50%;
+  color: #7D520B;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: var(--size-1halfx);
+  height: auto;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   margin-left: var(--spacing-half);
-  width: var(--size-1halfx);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
 }
 
-.c4 > svg {
+.c5 > svg {
   height: 1rem;
   width: 1rem;
 }
 
-.c4:hover {
-  background-color: #DBDEE1;
-}
-
-.c4:focus {
-  outline: none;
-}
-
-.c4:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+  <button
+    aria-hidden="true"
+    aria-label="deleteButtonAriaLabel"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      color="currentColor"
+      focusable="false"
+      height="16"
+      width="16"
+    />
+  </button>
+</span>
+`;
+
+exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop with icons) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c3 {
+  color: #7D520B;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2 {
+  color: #7D520B;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
+}
+
+<span
+  class="c0 c1"
+>
+  <svg
+    aria-hidden="false"
+    aria-label="home"
+    class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="12"
+    role="img"
+    width="12"
+  />
+  <span
+    class="c3"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #7D520B;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile removable) 1`] = `
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.033125rem;
+  -moz-letter-spacing: 0.033125rem;
+  -ms-letter-spacing: 0.033125rem;
+  letter-spacing: 0.033125rem;
+  line-height: 1.5rem;
+  min-height: var(--size-3x);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-3x);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c3:focus {
+  outline: none;
+}
+
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
+}
+
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: var(--size-3x);
+}
+
+.c4:focus {
+  outline: none;
+}
+
+.c4:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
+
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #7D520B;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c5 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  color: #7D520B;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-left: var(--spacing-half);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
+}
+
+.c5 > svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+  <button
+    aria-hidden="true"
+    aria-label="deleteButtonAriaLabel"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      color="currentColor"
+      focusable="false"
+      height="24"
+      width="24"
+    />
+  </button>
+</span>
+`;
+
+exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile with icons) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c3 {
+  color: #7D520B;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2 {
+  color: #7D520B;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
+}
+
+<span
+  class="c0 c1"
+>
+  <svg
+    aria-hidden="false"
+    aria-label="home"
+    class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="20"
+    role="img"
+    width="20"
+  />
+  <span
+    class="c3"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #7D520B;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=medium color=default matches snapshot (desktop removable) 1`] = `
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.025rem;
+  -moz-letter-spacing: 0.025rem;
+  -ms-letter-spacing: 0.025rem;
+  letter-spacing: 0.025rem;
+  line-height: 1rem;
+  min-height: var(--size-2x);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-2x);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c3:focus {
+  outline: none;
+}
+
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: var(--size-2x);
+}
+
+.c4:focus {
+  outline: none;
+}
+
+.c4:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
+
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c5 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  color: #1B1C1E;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-left: var(--spacing-half);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
+}
+
+.c5 > svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+  <button
+    aria-hidden="true"
+    aria-label="deleteButtonAriaLabel"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      color="currentColor"
+      focusable="false"
+      height="16"
+      width="16"
+    />
+  </button>
+</span>
+`;
+
+exports[`Tag Tag size=medium color=default matches snapshot (desktop with icons) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c3 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2 {
+  color: #1B1C1E;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
+}
+
+<span
+  class="c0 c1"
+>
+  <svg
+    aria-hidden="false"
+    aria-label="home"
+    class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="12"
+    role="img"
+    width="12"
+  />
+  <span
+    class="c3"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=medium color=default matches snapshot (desktop) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=medium color=default matches snapshot (mobile removable) 1`] = `
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.033125rem;
+  -moz-letter-spacing: 0.033125rem;
+  -ms-letter-spacing: 0.033125rem;
+  letter-spacing: 0.033125rem;
+  line-height: 1.5rem;
+  min-height: var(--size-3x);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-3x);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c3:focus {
+  outline: none;
+}
+
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
+}
+
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: var(--size-3x);
+}
+
+.c4:focus {
+  outline: none;
+}
+
+.c4:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
+
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c5 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  color: #1B1C1E;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-left: var(--spacing-half);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
+}
+
+.c5 > svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+  <button
+    aria-hidden="true"
+    aria-label="deleteButtonAriaLabel"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      color="currentColor"
+      focusable="false"
+      height="24"
+      width="24"
+    />
+  </button>
+</span>
+`;
+
+exports[`Tag Tag size=medium color=default matches snapshot (mobile with icons) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c3 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2 {
+  color: #1B1C1E;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
+}
+
+<span
+  class="c0 c1"
+>
+  <svg
+    aria-hidden="false"
+    aria-label="home"
+    class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="20"
+    role="img"
+    width="20"
+  />
+  <span
+    class="c3"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=medium color=default matches snapshot (mobile) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop removable) 1`] = `
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.025rem;
+  -moz-letter-spacing: 0.025rem;
+  -ms-letter-spacing: 0.025rem;
+  letter-spacing: 0.025rem;
+  line-height: 1rem;
+  min-height: var(--size-1halfx);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-1halfx);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c3:focus {
+  outline: none;
+}
+
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  min-width: var(--size-1halfx);
+  padding: 0;
+  width: var(--size-1halfx);
+}
+
+.c4:focus {
+  outline: none;
+}
+
+.c4:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
+
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-half);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #220123;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c5 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  color: #220123;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-left: var(--spacing-half);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
+}
+
+.c5 > svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+  <button
+    aria-hidden="true"
+    aria-label="deleteButtonAriaLabel"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      color="currentColor"
+      focusable="false"
+      height="16"
+      width="16"
+    />
+  </button>
+</span>
+`;
+
+exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop with icons) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-half);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c3 {
+  color: #220123;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2 {
+  color: #220123;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
+}
+
+<span
+  class="c0 c1"
+>
+  <svg
+    aria-hidden="false"
+    aria-label="home"
+    class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="12"
+    role="img"
+    width="12"
+  />
+  <span
+    class="c3"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-half);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #220123;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile removable) 1`] = `
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.033125rem;
+  -moz-letter-spacing: 0.033125rem;
+  -ms-letter-spacing: 0.033125rem;
+  letter-spacing: 0.033125rem;
+  line-height: 1.5rem;
+  min-height: var(--size-3x);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-3x);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c3:focus {
+  outline: none;
+}
+
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
+}
+
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: var(--size-3x);
+}
+
+.c4:focus {
+  outline: none;
+}
+
+.c4:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
+
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #220123;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c5 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  color: #220123;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-left: var(--spacing-half);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
+}
+
+.c5 > svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+  <button
+    aria-hidden="true"
+    aria-label="deleteButtonAriaLabel"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      color="currentColor"
+      focusable="false"
+      height="24"
+      width="24"
+    />
+  </button>
+</span>
+`;
+
+exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile with icons) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c3 {
+  color: #220123;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2 {
+  color: #220123;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
+}
+
+<span
+  class="c0 c1"
+>
+  <svg
+    aria-hidden="false"
+    aria-label="home"
+    class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="20"
+    role="img"
+    width="20"
+  />
+  <span
+    class="c3"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #EBE6EB;
+  border: 1px solid #38023B;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #220123;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop removable) 1`] = `
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.025rem;
+  -moz-letter-spacing: 0.025rem;
+  -ms-letter-spacing: 0.025rem;
+  letter-spacing: 0.025rem;
+  line-height: 1rem;
+  min-height: var(--size-1halfx);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-1halfx);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c3:focus {
+  outline: none;
+}
+
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  min-width: var(--size-1halfx);
+  padding: 0;
+  width: var(--size-1halfx);
+}
+
+.c4:focus {
+  outline: none;
+}
+
+.c4:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
+
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-half);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #7D520B;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c5 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  color: #7D520B;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-left: var(--spacing-half);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
+}
+
+.c5 > svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+  <button
+    aria-hidden="true"
+    aria-label="deleteButtonAriaLabel"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      color="currentColor"
+      focusable="false"
+      height="16"
+      width="16"
+    />
+  </button>
+</span>
+`;
+
+exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop with icons) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-half);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c3 {
+  color: #7D520B;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2 {
+  color: #7D520B;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
+}
+
+<span
+  class="c0 c1"
+>
+  <svg
+    aria-hidden="false"
+    aria-label="home"
+    class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="12"
+    role="img"
+    width="12"
+  />
+  <span
+    class="c3"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-half);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #7D520B;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-.c1 {
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile removable) 1`] = `
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius-half);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: 0 var(--spacing-half);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.033125rem;
+  -moz-letter-spacing: 0.033125rem;
+  -ms-letter-spacing: 0.033125rem;
+  letter-spacing: 0.033125rem;
+  line-height: 1.5rem;
+  min-height: var(--size-3x);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-3x);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-.c0 + .c0 {
-  margin-left: var(--spacing-1x);
+.c3:focus {
+  outline: none;
 }
 
-.c1 .c3 {
-  margin-right: calc(-1 * var(--spacing-half));
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
+}
+
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: var(--size-3x);
 }
 
-.c1:focus {
+.c4:focus {
   outline: none;
 }
 
-.c1:focus {
+.c4:focus {
   outline: none;
+  border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
+
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c2 {
+  color: #7D520B;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c5 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  color: #7D520B;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-left: var(--spacing-half);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
+}
+
+.c5 > svg {
+  height: 1rem;
+  width: 1rem;
 }
 
 <span
@@ -850,69 +2682,60 @@ exports[`Tag Tag small matches snapshot (desktop deletable) 1`] = `
     Test
   </span>
   <button
+    aria-hidden="true"
     aria-label="deleteButtonAriaLabel"
-    class="c3 c4"
-    data-testid="Test-delete-button"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
     type="button"
   >
     <svg
       aria-hidden="true"
-      class=""
       color="currentColor"
       focusable="false"
-      height="12"
-      width="12"
+      height="24"
+      width="24"
     />
   </button>
 </span>
 `;
 
-exports[`Tag Tag small matches snapshot (desktop with icons) 1`] = `
-.c2 {
-  color: #60666E;
-  height: var(--size-1x);
-  margin-right: var(--spacing-half);
-  vertical-align: text-bottom;
-  width: var(--size-1x);
-}
-
-.c3 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
+exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile with icons) 1`] = `
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius-half);
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius-1halfx);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: 0 var(--spacing-half);
+  padding: 0 var(--spacing-1x);
 }
 
 .c0 + .c0 {
   margin-left: var(--spacing-1x);
 }
 
-.c1:focus {
-  outline: none;
+.c3 {
+  color: #7D520B;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+.c2 {
+  color: #7D520B;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
 }
 
 <span
@@ -924,9 +2747,10 @@ exports[`Tag Tag small matches snapshot (desktop with icons) 1`] = `
     class="c2"
     color="currentColor"
     data-testid="Test-icon"
-    height="12"
+    focusable="true"
+    height="20"
     role="img"
-    width="12"
+    width="20"
   />
   <span
     class="c3"
@@ -936,17 +2760,142 @@ exports[`Tag Tag small matches snapshot (desktop with icons) 1`] = `
 </span>
 `;
 
-exports[`Tag Tag small matches snapshot (desktop) 1`] = `
+exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FAF3E7;
+  border: 1px solid #CE840C;
+  border-radius: var(--border-radius-1halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 0 var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
 .c2 {
+  color: #7D520B;
   display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
   max-width: 312px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+<span
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</span>
+`;
+
+exports[`Tag Tag size=small color=default matches snapshot (desktop removable) 1`] = `
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.025rem;
+  -moz-letter-spacing: 0.025rem;
+  -ms-letter-spacing: 0.025rem;
+  letter-spacing: 0.025rem;
+  line-height: 1rem;
+  min-height: var(--size-1halfx);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-1halfx);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c3:focus {
+  outline: none;
+}
+
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  min-width: var(--size-1halfx);
+  padding: 0;
+  width: var(--size-1halfx);
+}
+
+.c4:focus {
+  outline: none;
+}
+
+.c4:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
+
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -954,7 +2903,7 @@ exports[`Tag Tag small matches snapshot (desktop) 1`] = `
   align-items: center;
   background-color: #F1F2F2;
   border: 1px solid #878F9A;
-  border-radius: var(--border-radius-half);
+  border-radius: var(--border-radius);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -966,14 +2915,43 @@ exports[`Tag Tag small matches snapshot (desktop) 1`] = `
   margin-left: var(--spacing-1x);
 }
 
-.c1:focus {
-  outline: none;
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+.c5 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  color: #1B1C1E;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-left: var(--spacing-half);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
+}
+
+.c5 > svg {
+  height: 1rem;
+  width: 1rem;
 }
 
 <span
@@ -984,20 +2962,25 @@ exports[`Tag Tag small matches snapshot (desktop) 1`] = `
   >
     Test
   </span>
+  <button
+    aria-hidden="true"
+    aria-label="deleteButtonAriaLabel"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      color="currentColor"
+      focusable="false"
+      height="16"
+      width="16"
+    />
+  </button>
 </span>
 `;
 
-exports[`Tag Tag small matches snapshot (desktop) 2`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
+exports[`Tag Tag size=small color=default matches snapshot (desktop with icons) 1`] = `
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1010,45 +2993,55 @@ exports[`Tag Tag small matches snapshot (desktop) 2`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: 0 var(--spacing-1x);
+  padding: 0 var(--spacing-half);
 }
 
 .c0 + .c0 {
   margin-left: var(--spacing-1x);
 }
 
-.c1:focus {
-  outline: none;
+.c3 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+.c2 {
+  color: #1B1C1E;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
 }
 
 <span
   class="c0 c1"
 >
-  <span
+  <svg
+    aria-hidden="false"
+    aria-label="home"
     class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="12"
+    role="img"
+    width="12"
+  />
+  <span
+    class="c3"
   >
     Test
   </span>
 </span>
 `;
 
-exports[`Tag Tag small matches snapshot (mobile clickable) 1`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
+exports[`Tag Tag size=small color=default matches snapshot (desktop) 1`] = `
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1056,7 +3049,7 @@ exports[`Tag Tag small matches snapshot (mobile clickable) 1`] = `
   align-items: center;
   background-color: #F1F2F2;
   border: 1px solid #878F9A;
-  border-radius: var(--border-radius-2x);
+  border-radius: var(--border-radius);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1068,80 +3061,91 @@ exports[`Tag Tag small matches snapshot (mobile clickable) 1`] = `
   margin-left: var(--spacing-1x);
 }
 
-.c1:hover {
-  background-color: #DBDEE1;
-  border-color: #60666E;
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-<button
+<span
   class="c0 c1"
-  type="button"
 >
   <span
     class="c2"
   >
     Test
   </span>
-</button>
+</span>
 `;
 
-exports[`Tag Tag small matches snapshot (mobile deletable) 1`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.c4 {
+exports[`Tag Tag size=small color=default matches snapshot (mobile removable) 1`] = `
+.c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-radius: 50%;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: var(--size-1halfx);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: var(--font-bold);
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-left: var(--spacing-half);
-  width: var(--size-1halfx);
+  -webkit-letter-spacing: 0.033125rem;
+  -moz-letter-spacing: 0.033125rem;
+  -ms-letter-spacing: 0.033125rem;
+  letter-spacing: 0.033125rem;
+  line-height: 1.5rem;
+  min-height: var(--size-3x);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-3x);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-.c4 > svg {
-  height: 1rem;
-  width: 1rem;
+.c3:focus {
+  outline: none;
 }
 
-.c4:hover {
-  background-color: #DBDEE1;
+.c3:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c3 > svg {
+  color: inherit;
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
+}
+
+.c4 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: var(--size-3x);
 }
 
 .c4:focus {
@@ -1150,8 +3154,26 @@ exports[`Tag Tag small matches snapshot (mobile deletable) 1`] = `
 
 .c4:focus {
   outline: none;
+  border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c4:hover,
+.c4[aria-expanded='true'] {
+  background-color: #DBDEE1;
+  border-color: transparent;
+  color: #1B1C1E;
+}
+
+.c4:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+}
+
+.c4 > svg {
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
 }
 
 .c1 {
@@ -1161,30 +3183,55 @@ exports[`Tag Tag small matches snapshot (mobile deletable) 1`] = `
   align-items: center;
   background-color: #F1F2F2;
   border: 1px solid #878F9A;
-  border-radius: var(--border-radius-half);
+  border-radius: var(--border-radius-1halfx);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: 0 var(--spacing-half);
+  padding: 0 var(--spacing-1x);
 }
 
 .c0 + .c0 {
   margin-left: var(--spacing-1x);
 }
 
-.c1 .c3 {
-  margin-right: calc(-1 * var(--spacing-half));
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.c1:focus {
-  outline: none;
+.c5 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  color: #1B1C1E;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-left: var(--spacing-half);
+  margin-right: calc(-1 * var(--spacing-half));
+  min-height: auto;
+  min-width: auto;
+  width: auto;
 }
 
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+.c5 > svg {
+  height: 1rem;
+  width: 1rem;
 }
 
 <span
@@ -1196,42 +3243,24 @@ exports[`Tag Tag small matches snapshot (mobile deletable) 1`] = `
     Test
   </span>
   <button
+    aria-hidden="true"
     aria-label="deleteButtonAriaLabel"
-    class="c3 c4"
-    data-testid="Test-delete-button"
+    class="c3 c4 c5"
+    data-testid="Test-remove-button"
     type="button"
   >
     <svg
       aria-hidden="true"
-      class=""
       color="currentColor"
       focusable="false"
-      height="12"
-      width="12"
+      height="24"
+      width="24"
     />
   </button>
 </span>
 `;
 
-exports[`Tag Tag small matches snapshot (mobile with icons) 1`] = `
-.c2 {
-  color: #60666E;
-  height: var(--size-1x);
-  margin-right: var(--spacing-half);
-  vertical-align: text-bottom;
-  width: var(--size-1x);
-}
-
-.c3 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
+exports[`Tag Tag size=small color=default matches snapshot (mobile with icons) 1`] = `
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1239,26 +3268,35 @@ exports[`Tag Tag small matches snapshot (mobile with icons) 1`] = `
   align-items: center;
   background-color: #F1F2F2;
   border: 1px solid #878F9A;
-  border-radius: var(--border-radius-half);
+  border-radius: var(--border-radius-1halfx);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: 0 var(--spacing-half);
+  padding: 0 var(--spacing-1x);
 }
 
 .c0 + .c0 {
   margin-left: var(--spacing-1x);
 }
 
-.c1:focus {
-  outline: none;
+.c3 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+.c2 {
+  color: #1B1C1E;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
 }
 
 <span
@@ -1270,9 +3308,10 @@ exports[`Tag Tag small matches snapshot (mobile with icons) 1`] = `
     class="c2"
     color="currentColor"
     data-testid="Test-icon"
-    height="12"
+    focusable="true"
+    height="20"
     role="img"
-    width="12"
+    width="20"
   />
   <span
     class="c3"
@@ -1282,17 +3321,7 @@ exports[`Tag Tag small matches snapshot (mobile with icons) 1`] = `
 </span>
 `;
 
-exports[`Tag Tag small matches snapshot (mobile) 1`] = `
-.c2 {
-  display: inline-block;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  max-width: 312px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
+exports[`Tag Tag size=small color=default matches snapshot (mobile) 1`] = `
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1300,41 +3329,20 @@ exports[`Tag Tag small matches snapshot (mobile) 1`] = `
   align-items: center;
   background-color: #F1F2F2;
   border: 1px solid #878F9A;
-  border-radius: var(--border-radius-half);
+  border-radius: var(--border-radius-1halfx);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: 0 var(--spacing-half);
+  padding: 0 var(--spacing-1x);
 }
 
 .c0 + .c0 {
   margin-left: var(--spacing-1x);
 }
 
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
-
-<span
-  class="c0 c1"
->
-  <span
-    class="c2"
-  >
-    Test
-  </span>
-</span>
-`;
-
-exports[`Tag Tag small matches snapshot (mobile) 2`] = `
 .c2 {
+  color: #1B1C1E;
   display: inline-block;
   font-size: 0.875rem;
   line-height: 1.5rem;
@@ -1344,35 +3352,6 @@ exports[`Tag Tag small matches snapshot (mobile) 2`] = `
   white-space: nowrap;
 }
 
-.c1 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: #F1F2F2;
-  border: 1px solid #878F9A;
-  border-radius: var(--border-radius);
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  padding: 0 var(--spacing-1x);
-}
-
-.c0 + .c0 {
-  margin-left: var(--spacing-1x);
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #84C6EA;
-  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
-}
-
 <span
   class="c0 c1"
 >
diff --git a/packages/react/src/components/tag/tag.tsx b/packages/react/src/components/tag/tag.tsx
index 2b8ea85d71..677af1aaf9 100644
--- a/packages/react/src/components/tag/tag.tsx
+++ b/packages/react/src/components/tag/tag.tsx
@@ -1,20 +1,32 @@
 import {
-    ButtonHTMLAttributes,
-    DetailedHTMLProps,
     forwardRef,
     MouseEventHandler,
     Ref,
     SVGProps,
     useCallback,
 } from 'react';
-import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
+import styled, { StyledProps } from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
-import { ResolvedTheme } from '../../themes/theme';
-import { focus } from '../../utils/css-state';
+import { IconButton } from '../buttons/icon-button';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName } from '../icon/icon';
 
-type TagSize = 'small' | 'medium';
+export type TagColor =
+    | 'default'
+    | 'decorative-01'
+    | 'decorative-02'
+    | 'decorative-03'
+    | 'decorative-04'
+    | 'decorative-05'
+    | 'decorative-06'
+    | 'decorative-07'
+    | 'decorative-08'
+    | 'decorative-09'
+    | 'decorative-10';
+
+export type TagSize =
+    | 'small'
+    | 'medium';
 
 export interface TagValue {
     id?: string;
@@ -23,32 +35,23 @@ export interface TagValue {
 
 export interface TagProps {
     className?: string;
-    iconName?: IconName;
     size?: TagSize;
     value: TagValue;
+    iconName?: IconName;
 
-    /** Mutually exclusive with onDelete */
-    onClick?(tag: TagValue): void;
-
-    /** Mutually exclusive with onClick */
-    onDelete?(tag: TagValue): void;
-}
-
-interface ContainerProps {
-    $clickable: boolean;
-    $deletable: boolean;
-    $hasIcon: boolean;
-    $isMobile: boolean;
-    $tagSize: TagSize;
-    type?: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>['type'];
+    color?: TagColor;
+    onRemove?(tag: TagValue): void;
 }
 
-interface TagLabelProps {
+interface TagStylingProps {
     $isMobile: boolean;
     $tagSize: TagSize;
+    $hasIcon: boolean;
+    $tagColor: TagColor;
+    $removable: boolean;
 }
 
-function getFontSize({ $isMobile }: TagLabelProps): number {
+function getFontSize({ $isMobile }: TagStylingProps): number {
     return $isMobile ? 0.875 : 0.75;
 }
 
@@ -56,70 +59,56 @@ function getIconSize(isMobile: boolean): string {
     return isMobile ? '20' : '12';
 }
 
-interface IconOrButtonProps {
-    $isMobile: boolean;
-    $tagSize: TagSize;
+function isDefaultColor(tagColor: TagColor): tagColor is 'default' {
+    return tagColor === 'default';
 }
 
 function isMedium(tagSize: TagSize): tagSize is 'medium' {
     return tagSize === 'medium';
 }
 
-function getPadding({ $isMobile, $tagSize }: IconOrButtonProps): string {
-    return $isMobile || isMedium($tagSize) ? '0 var(--spacing-1x)' : '0 var(--spacing-half)';
-}
-
 function isSmall(tagSize: TagSize): tagSize is 'small' {
     return tagSize === 'small';
 }
 
-function getLineHeight({ $isMobile, $tagSize }: TagLabelProps): number {
-    if (isSmall($tagSize)) {
-        return $isMobile ? 1.5 : 1;
-    }
-    return $isMobile ? 1.875 : 1.5;
+function getPadding({ $isMobile, $tagSize }: TagStylingProps): string {
+    return $isMobile || isMedium($tagSize) ? '0 var(--spacing-1x)' : '0 var(--spacing-half)';
 }
 
-function getBorderRadius({ $clickable, $isMobile, $tagSize }: ContainerProps): string {
-    if ($clickable) {
-        const isSmallTag = isSmall($tagSize);
-        if ($isMobile) {
-            return isSmallTag ? 'var(--border-radius-3x)' : 'var(--border-radius-4x)';
-        }
-        return isSmallTag ? 'var(--border-radius-2x)' : 'var(--border-radius-3x)';
+function getLineHeight({ $isMobile, $tagSize }: TagStylingProps): number {
+    if ($isMobile) {
+        return isSmall($tagSize) ? 1.5 : 1.875;
     }
-    return $isMobile || isMedium($tagSize) ? 'var(--border-radius)' : 'var(--border-radius-half)';
+    return isSmall($tagSize) ? 1 : 1.5;
 }
 
-const StyledIcon = styled(Icon)<SVGProps<SVGSVGElement> & IconOrButtonProps>`
-    color: ${({ theme }) => theme.component['tag-delete-icon-color']};
-    height: var(--size-1x);
-    margin-right: var(--spacing-half);
-    vertical-align: text-bottom;
-    width: var(--size-1x);
-`;
-
-const DeleteIcon = styled(Icon).attrs({
-    'aria-hidden': 'true',
-    name: 'x',
-})``;
+type ColorProperty = 'background-color' | 'border-color' | 'text-color' | 'icon-color';
 
-function getClickableStyle({ $clickable }: ContainerProps): FlattenInterpolation<ThemeProps<ResolvedTheme>> | false {
-    return $clickable && css`
-        &:hover {
-            background-color: ${({ theme }) => theme.component['tag-clickable-hover-background-color']};
-            border-color: ${({ theme }) => theme.component['tag-clickable-hover-border-color']};
+function getTagColors(
+    { $tagColor, theme }: StyledProps<TagStylingProps>,
+    $colorProperty: ColorProperty,
+): string {
+    if (isDefaultColor($tagColor)) {
+        return theme.component[`tag-${$colorProperty}`];
+    }
+    return theme.component[`tag-${$tagColor}-${$colorProperty}`];
+}
 
-            ${StyledIcon} {
-                color: ${({ theme }) => theme.component['tag-clickable-hover-icon-color']};
-            }
-        }
+const TagContainer = styled.span<TagStylingProps>`
+    align-items: center;
+    background-color: ${(props) => getTagColors(props, 'background-color')};
+    border: 1px solid ${(props) => getTagColors(props, 'border-color')};
+    border-radius: ${({ $tagSize, $isMobile }) => ($isMobile || isMedium($tagSize) ? 'var(--border-radius-1halfx)' : 'var(--border-radius)')};
+    display: inline-flex;
+    padding: ${getPadding};
 
-        ${focus};
-    `;
-}
+    & + & {
+        margin-left: var(--spacing-1x);
+    }
+`;
 
-const TagLabel = styled.span<TagLabelProps>`
+const TagLabel = styled.span<TagStylingProps>`
+    color: ${(props) => getTagColors(props, 'text-color')};
     display: inline-block;
     font-size: ${getFontSize}rem;
     line-height: ${getLineHeight}rem;
@@ -129,92 +118,64 @@ const TagLabel = styled.span<TagLabelProps>`
     white-space: nowrap;
 `;
 
-const DeleteButton = styled.button<IconOrButtonProps>`
+const StyledIcon = styled(Icon)<SVGProps<SVGSVGElement> & TagStylingProps>`
+    color: ${(props) => getTagColors(props, 'icon-color')};
+    height: var(--size-1x);
+    margin-right: var(--spacing-half);
+    vertical-align: text-bottom;
+    width: var(--size-1x);
+`;
+
+const RemoveButton = styled(IconButton)<TagStylingProps>`
     align-items: center;
     border-radius: 50%;
+    color: ${(props) => getTagColors(props, 'icon-color')};
     display: inline-flex;
-    height: var(--size-1halfx);
+    height: auto;
     justify-content: center;
     margin-left: var(--spacing-half);
-    width: var(--size-1halfx);
+    margin-right: calc(-1 * var(--spacing-half));
+    min-height: auto;
+    min-width: auto;
+    width: auto;
 
     > svg {
         height: 1rem;
         width: 1rem;
     }
-
-    &:hover {
-        background-color: ${({ theme }) => theme.component['tag-delete-button-hover-background-color']};
-
-        ${DeleteIcon} {
-            color: ${({ theme }) => theme.component['tag-delete-button-icon-color']};
-        }
-    }
-
-    ${focus};
-`;
-
-const Container = styled.span<ContainerProps>`
-    align-items: center;
-    background-color: ${({ theme }) => theme.component['tag-background-color']};
-
-    border: 1px solid ${({ theme }) => theme.component['tag-border-color']};
-    border-radius: ${getBorderRadius};
-    display: inline-flex;
-    padding: ${getPadding};
-
-    & + & {
-        margin-left: var(--spacing-1x);
-    }
-
-    ${DeleteButton} {
-        margin-right: calc(-1 * var(--spacing-half));
-    }
-
-    ${getClickableStyle};
-
-    ${focus};
 `;
 
 export const Tag = forwardRef(({
     className,
     iconName,
-    onClick,
-    onDelete,
     size = 'medium',
+    color = 'default',
     value,
+    onRemove,
 }: TagProps, ref: Ref<HTMLElement>) => {
-    if (onClick && onDelete) {
-        throw new Error('Only one of onClick or onDelete can be provided.');
-    }
-
     const { t } = useTranslation('tag');
     const { isMobile } = useDeviceContext();
-    const hasIconLabel = !(value.label.toLowerCase() === iconName?.toLowerCase());
 
-    const handleClick: MouseEventHandler = useCallback(() => {
-        onClick?.(value);
-    }, [onClick, value]);
+    const isRemovable = !!onRemove;
+    const hasIcon = !!iconName;
+    const hasIconLabel = !(value.label.toLowerCase() === iconName?.toLowerCase());
 
     const handleDelete: MouseEventHandler = useCallback((e) => {
         e.stopPropagation();
-        onDelete?.(value);
-    }, [onDelete, value]);
+        onRemove?.(value);
+    }, [onRemove, value]);
 
     return (
-        <Container
+        <TagContainer
             ref={ref}
-            as={onClick ? 'button' : 'span'}
             className={className}
-            onClick={handleClick}
-            type={onClick ? 'button' : undefined}
             $isMobile={isMobile}
             $tagSize={size}
-            $clickable={!!onClick}
-            $deletable={!!onDelete}
-            $hasIcon={!!iconName}
+            $removable={isRemovable}
+            $hasIcon={hasIcon}
+            $tagColor={color}
         >
-            {iconName && (
+            {hasIcon && (
                 <StyledIcon
                     aria-label={hasIconLabel ? iconName : undefined}
                     aria-hidden={!hasIconLabel}
@@ -222,32 +183,43 @@ export const Tag = forwardRef(({
                     name={iconName}
                     size={getIconSize(isMobile)}
                     role="img"
+                    focusable
                     $isMobile={isMobile}
                     $tagSize={size}
-                    focusable={undefined}
+                    $tagColor={color}
+                    $hasIcon={hasIcon}
+                    $removable={isRemovable}
                 />
             )}
 
             <TagLabel
                 $isMobile={isMobile}
                 $tagSize={size}
+                $tagColor={color}
+                $hasIcon={hasIcon}
+                $removable={isRemovable}
             >
                 {value.label}
             </TagLabel>
 
-            {onDelete && (
-                <DeleteButton
-                    data-testid={`${value.label}-delete-button`}
+            {isRemovable && (
+                <RemoveButton
+                    aria-hidden="true"
+                    data-testid={`${value.label}-remove-button`}
                     type="button"
+                    buttonType="tertiary"
+                    iconName="x"
+                    size={size}
                     aria-label={t('deleteButtonAriaLabel', { label: value.label })}
                     onClick={handleDelete}
                     $tagSize={size}
                     $isMobile={isMobile}
-                >
-                    <DeleteIcon size={getIconSize(isMobile)} aria-hidden="true" />
-                </DeleteButton>
+                    $tagColor={color}
+                    $hasIcon={hasIcon}
+                    $removable={isRemovable}
+                />
             )}
-        </Container>
+        </TagContainer>
     );
 });
 
diff --git a/packages/react/src/components/tag/toggle-tag.test.tsx b/packages/react/src/components/tag/toggle-tag.test.tsx
new file mode 100644
index 0000000000..43e7fc5e49
--- /dev/null
+++ b/packages/react/src/components/tag/toggle-tag.test.tsx
@@ -0,0 +1,87 @@
+import { shallow } from 'enzyme';
+import { getByTestId } from '../../test-utils/enzyme-selectors';
+import { renderWithProviders } from '../../test-utils/renderer';
+import { DeviceType } from '../device-context-provider/device-context-provider';
+import { ToggleTag, ToggleTagProps } from './toggle-tag';
+
+describe('ToggleTag', () => {
+    const tagSizes: ToggleTagProps['size'][] = ['small', 'medium'];
+    tagSizes.forEach((size) => {
+        describe(`ToggleTag ${size}`, () => {
+            it('should call onClick callback when tag is clicked', () => {
+                const callback = jest.fn();
+                const wrapper = shallow(
+                    <ToggleTag size={size} value={{ label: 'Test' }} onClick={callback} />,
+                );
+
+                wrapper.simulate('click');
+
+                expect(callback).toHaveBeenCalledTimes(1);
+            });
+
+            it(
+                'should have aria-hidden="false" and an aria-label on icon when the label is not the same as iconName',
+                () => {
+                    const wrapper = shallow(
+                        <ToggleTag size={size} iconName="home" value={{ label: 'Test' }} />,
+                    );
+
+                    const testIconWrapper = getByTestId(wrapper, 'Test-icon');
+                    expect(testIconWrapper.prop('aria-label')).toBe('home');
+                    expect(testIconWrapper.prop('aria-hidden')).toBe(false);
+                },
+            );
+
+            it(
+                'should have aria-hidden="true" and no label on icon when the label is the same as the iconName',
+                () => {
+                    const wrapper = shallow(
+                        <ToggleTag size={size} iconName="home" value={{ label: 'Home' }} />,
+                    );
+
+                    const testIconWrapper = getByTestId(wrapper, 'Home-icon');
+                    expect(testIconWrapper.prop('aria-label')).toBe(undefined);
+                    expect(testIconWrapper.prop('aria-hidden')).toBe(true);
+                },
+            );
+
+            (['mobile', 'desktop'] as DeviceType[]).forEach((deviceType) => {
+                it(`matches snapshot (${deviceType})`, () => {
+                    const tree = renderWithProviders(<ToggleTag size={size} value={{ label: 'Test' }} />, 'desktop');
+
+                    expect(tree).toMatchSnapshot();
+                });
+
+                it(`matches snapshot (${deviceType})`, () => {
+                    const tree = renderWithProviders(<ToggleTag size={size} value={{ label: 'Test' }} />, 'mobile');
+
+                    expect(tree).toMatchSnapshot();
+                });
+
+                it(`matches snapshot (${deviceType} with icons)`, () => {
+                    const tree = renderWithProviders(
+                        <ToggleTag
+                            size={size}
+                            iconName="home"
+                            value={{ label: 'Test' }}
+                        />,
+                    );
+
+                    expect(tree).toMatchSnapshot();
+                });
+
+                it(`matches snapshot (${deviceType} clickable)`, () => {
+                    const tree = renderWithProviders(
+                        <ToggleTag
+                            size={size}
+                            value={{ label: 'Test' }}
+                            onClick={jest.fn()}
+                        />,
+                    );
+
+                    expect(tree).toMatchSnapshot();
+                });
+            });
+        });
+    });
+});
diff --git a/packages/react/src/components/tag/toggle-tag.test.tsx.snap b/packages/react/src/components/tag/toggle-tag.test.tsx.snap
new file mode 100644
index 0000000000..5ef78ac34d
--- /dev/null
+++ b/packages/react/src/components/tag/toggle-tag.test.tsx.snap
@@ -0,0 +1,1133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleTag ToggleTag medium matches snapshot (desktop clickable) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-3x);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-1x);
+  padding-left: var(--spacing-1halfx);
+  padding-right: var(--spacing-1halfx);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag medium matches snapshot (desktop with icons) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-3x);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-1x);
+  padding-left: var(--spacing-1halfx);
+  padding-right: var(--spacing-1halfx);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c3 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c3:hover {
+  color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <svg
+    aria-hidden="false"
+    aria-label="home"
+    class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="12"
+    role="img"
+    width="12"
+  />
+  <span
+    class="c3"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag medium matches snapshot (desktop) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-3x);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-1x);
+  padding-left: var(--spacing-1halfx);
+  padding-right: var(--spacing-1halfx);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag medium matches snapshot (desktop) 2`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-3x);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-1x);
+  padding-left: var(--spacing-1halfx);
+  padding-right: var(--spacing-1halfx);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag medium matches snapshot (mobile clickable) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-3x);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-1x);
+  padding-left: var(--spacing-1halfx);
+  padding-right: var(--spacing-1halfx);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag medium matches snapshot (mobile with icons) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-3x);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-1x);
+  padding-left: var(--spacing-1halfx);
+  padding-right: var(--spacing-1halfx);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c3 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c3:hover {
+  color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <svg
+    aria-hidden="false"
+    aria-label="home"
+    class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="12"
+    role="img"
+    width="12"
+  />
+  <span
+    class="c3"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag medium matches snapshot (mobile) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-3x);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-1x);
+  padding-left: var(--spacing-1halfx);
+  padding-right: var(--spacing-1halfx);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag medium matches snapshot (mobile) 2`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-3x);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-1x);
+  padding-left: var(--spacing-1halfx);
+  padding-right: var(--spacing-1halfx);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag small matches snapshot (desktop clickable) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-2halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-half);
+  padding-left: var(--spacing-1x);
+  padding-right: var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag small matches snapshot (desktop with icons) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-2halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-half);
+  padding-left: var(--spacing-1x);
+  padding-right: var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c3 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c3:hover {
+  color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <svg
+    aria-hidden="false"
+    aria-label="home"
+    class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="12"
+    role="img"
+    width="12"
+  />
+  <span
+    class="c3"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag small matches snapshot (desktop) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-2halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-half);
+  padding-left: var(--spacing-1x);
+  padding-right: var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag small matches snapshot (desktop) 2`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-2halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-1x);
+  padding-left: var(--spacing-1x);
+  padding-right: var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag small matches snapshot (mobile clickable) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-2halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-half);
+  padding-left: var(--spacing-1x);
+  padding-right: var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag small matches snapshot (mobile with icons) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-2halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-half);
+  padding-left: var(--spacing-1x);
+  padding-right: var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c3 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c3:hover {
+  color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  height: var(--size-1x);
+  margin-right: var(--spacing-half);
+  vertical-align: text-bottom;
+  width: var(--size-1x);
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <svg
+    aria-hidden="false"
+    aria-label="home"
+    class="c2"
+    color="currentColor"
+    data-testid="Test-icon"
+    focusable="true"
+    height="12"
+    role="img"
+    width="12"
+  />
+  <span
+    class="c3"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag small matches snapshot (mobile) 1`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-2halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-half);
+  padding-left: var(--spacing-1x);
+  padding-right: var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
+
+exports[`ToggleTag ToggleTag small matches snapshot (mobile) 2`] = `
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #878F9A;
+  border-radius: var(--border-radius-2halfx);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--font-family);
+  font-weight: 400;
+  padding: 0 var(--spacing-1x);
+  padding-left: var(--spacing-1x);
+  padding-right: var(--spacing-1x);
+}
+
+.c0 + .c0 {
+  margin-left: var(--spacing-1x);
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #84C6EA;
+  box-shadow: 0 0 0 1px #006296,0 0 0 3px #84C6EA;
+}
+
+.c1:hover {
+  background-color: #DBDEE1;
+  border-color: #000000;
+}
+
+.c2 {
+  color: #1B1C1E;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  max-width: 312px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c2:hover {
+  color: #000000;
+}
+
+<button
+  class="c0 c1"
+>
+  <span
+    class="c2"
+  >
+    Test
+  </span>
+</button>
+`;
diff --git a/packages/react/src/components/tag/toggle-tag.tsx b/packages/react/src/components/tag/toggle-tag.tsx
new file mode 100644
index 0000000000..5a05156fe1
--- /dev/null
+++ b/packages/react/src/components/tag/toggle-tag.tsx
@@ -0,0 +1,175 @@
+import { forwardRef, MouseEventHandler, Ref, SVGProps, useCallback, useState } from 'react';
+import styled from 'styled-components';
+import { focus } from '../../utils/css-state';
+import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { Icon, IconName } from '../icon/icon';
+
+export type ToggleTagSize =
+    | 'small'
+    | 'medium';
+
+export interface ToggleTagValue {
+    id?: string;
+    label: string;
+}
+
+export interface ToggleTagProps {
+    className?: string;
+    size?: ToggleTagSize;
+    value: ToggleTagValue;
+    iconName?: IconName;
+
+    onClick?(tag: ToggleTagValue): void;
+    /**
+     * Whether the tag is selected.
+     * Can manually set the selected state of the tag, without the need for a click event.
+     */
+    selected?: boolean;
+}
+
+interface ToggleTagStylingProps {
+    $isMobile: boolean;
+    $tagSize: ToggleTagSize;
+    $hasIcon: boolean;
+    $selected?: boolean;
+}
+
+function getFontSize({ $isMobile }: ToggleTagStylingProps): number {
+    return $isMobile ? 0.875 : 0.75;
+}
+
+function getIconSize(isMobile: boolean): string {
+    return isMobile ? '20' : '12';
+}
+
+function isMedium(tagSize: ToggleTagSize): tagSize is 'medium' {
+    return tagSize === 'medium';
+}
+
+function isSmall(tagSize: ToggleTagSize): tagSize is 'small' {
+    return tagSize === 'small';
+}
+
+function getPadding({ $isMobile, $tagSize }: ToggleTagStylingProps): string {
+    return $isMobile || isMedium($tagSize) ? '0 var(--spacing-1x)' : '0 var(--spacing-half)';
+}
+
+function getLineHeight({ $isMobile, $tagSize }: ToggleTagStylingProps): number {
+    if ($isMobile) {
+        return isSmall($tagSize) ? 1.5 : 1.875;
+    }
+    return isSmall($tagSize) ? 1 : 1.5;
+}
+
+const TagContainer = styled.button<ToggleTagStylingProps>`
+    align-items: center;
+    background-color: ${({ theme, $selected }) => ($selected ? theme.component['tag-selected-background-color'] : theme.component['tag-background-color'])};
+    border: 1px solid ${({ theme, $selected }) => ($selected ? theme.component['tag-selected-border-color'] : theme.component['tag-border-color'])};
+    border-radius: ${({ $tagSize }) => (isSmall($tagSize) ? 'var(--border-radius-2halfx)' : 'var(--border-radius-3x)')};
+    display: inline-flex;
+    font-family: var(--font-family);
+    font-weight: ${({ $selected }) => ($selected ? '600' : '400')};
+    padding: ${getPadding};
+    padding-left: ${({ $tagSize }) => (isSmall($tagSize) ? 'var(--spacing-1x)' : 'var(--spacing-1halfx)')};
+    padding-right: ${({ $tagSize }) => (isSmall($tagSize) ? 'var(--spacing-1x)' : 'var(--spacing-1halfx)')};
+
+    & + & {
+        margin-left: var(--spacing-1x);
+    }
+
+    ${focus};
+
+    &:hover {
+        background-color: ${({ theme, $selected }) => ($selected ? theme.component['tag-selected-background-color'] : theme.component['tag-hover-background-color'])};
+        border-color: ${({ theme, $selected }) => ($selected ? theme.component['tag-selected-border-color'] : theme.component['tag-hover-border-color'])};
+    }
+`;
+
+const TagLabel = styled.span<ToggleTagStylingProps>`
+    color: ${({ theme, $selected }) => ($selected ? theme.component['tag-selected-text-color'] : theme.component['tag-text-color'])};
+    display: inline-block;
+    font-size: ${getFontSize}rem;
+    line-height: ${getLineHeight}rem;
+    max-width: 312px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:hover {
+        color: ${({ $selected, theme }) => ($selected ? theme.component['tag-selected-text-color'] : theme.component['tag-hover-text-color'])};
+    }
+`;
+
+const StyledIcon = styled(Icon)<SVGProps<SVGSVGElement> & ToggleTagStylingProps>`
+    color: ${({ theme, $selected }) => ($selected ? theme.component['tag-selected-icon-color'] : theme.component['tag-icon-color'])};
+    height: var(--size-1x);
+    margin-right: var(--spacing-half);
+    vertical-align: text-bottom;
+    width: var(--size-1x);
+
+    &:hover {
+        color: ${({ $selected, theme }) => ($selected ? theme.component['tag-selected-icon-color'] : theme.component['tag-hover-icon-color'])};
+    }
+`;
+
+export const ToggleTag = forwardRef(({
+    className,
+    iconName,
+    size = 'medium',
+    value,
+    selected = undefined,
+    onClick,
+}: ToggleTagProps, ref: Ref<HTMLButtonElement>) => {
+    const { isMobile } = useDeviceContext();
+
+    const hasIcon = !!iconName;
+    const hasIconLabel = !(value.label.toLowerCase() === iconName?.toLowerCase());
+    const [isSelectedInternal, setSelectedInternal] = useState(selected ?? false);
+    const isSelected = selected !== undefined ? selected : isSelectedInternal;
+
+    const handleClick: MouseEventHandler = useCallback(() => {
+        if (selected === undefined) {
+            setSelectedInternal(!isSelectedInternal);
+        }
+        onClick?.(value);
+    }, [isSelectedInternal, onClick, selected, value]);
+
+    return (
+        <TagContainer
+            ref={ref}
+            className={className}
+            onClick={handleClick}
+            $isMobile={isMobile}
+            $tagSize={size}
+            $hasIcon={hasIcon}
+            $selected={isSelected}
+        >
+            {hasIcon && (
+                <StyledIcon
+                    aria-label={hasIconLabel ? iconName : undefined}
+                    aria-hidden={!hasIconLabel}
+                    data-testid={`${value.label}-icon`}
+                    name={iconName}
+                    size={getIconSize(isMobile)}
+                    role="img"
+                    $isMobile={isMobile}
+                    $tagSize={size}
+                    focusable
+                    $selected={isSelected}
+                    $hasIcon={hasIcon}
+                />
+            )}
+
+            <TagLabel
+                $isMobile={isMobile}
+                $tagSize={size}
+                $selected={isSelected}
+                $hasIcon={hasIcon}
+            >
+                {value.label}
+            </TagLabel>
+        </TagContainer>
+    );
+});
+
+ToggleTag.displayName = 'ToggleTag';
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index ce70474563..0c963f1fdc 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -71,7 +71,12 @@ export { Table } from './components/table/table';
 export { TableColumn, TableData } from './components/table/types';
 export { Modal } from './components/modal/modal';
 export { ModalDialog } from './components/modal/modal-dialog';
-export { Tag, TagProps, TagValue } from './components/tag/tag';
+export {
+    Tag, TagValue, TagColor, TagSize, TagProps,
+} from './components/tag/tag';
+export {
+    ToggleTag, ToggleTagValue, ToggleTagSize, ToggleTagProps,
+} from './components/tag/toggle-tag';
 export { Lozenge } from './components/lozenge/lozenge';
 export { RadioCard } from './components/radio-card-group/radio-card';
 export { RadioCardGroup } from './components/radio-card-group/radio-card-group';
diff --git a/packages/react/src/styles/_variables.scss b/packages/react/src/styles/_variables.scss
index 32a822a46c..d546aac4f7 100644
--- a/packages/react/src/styles/_variables.scss
+++ b/packages/react/src/styles/_variables.scss
@@ -22,10 +22,12 @@
   // var for border-radius
   --border-radius-half: calc(0.5 * var(--border-radius));
   --border-radius: 4px;
+  --border-radius-1halfx: calc(1.5 * var(--border-radius));
   --border-radius-2x: calc(2 * var(--border-radius));
+  --border-radius-2halfx: calc(2.5 * var(--border-radius));
   --border-radius-3x: calc(3 * var(--border-radius));
   --border-radius-4x: calc(4 * var(--border-radius));
-    // var for heights 
+    // var for heights
   --size-base: 1rem;
   --size-half: calc(0.5 * var(--size-base));
   --size-1x: var(--size-base);
diff --git a/packages/react/src/themes/tokens/component/tag-tokens.ts b/packages/react/src/themes/tokens/component/tag-tokens.ts
index 4b0eb0cb56..2df3101f1f 100644
--- a/packages/react/src/themes/tokens/component/tag-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tag-tokens.ts
@@ -4,13 +4,56 @@ import { RefTokens } from '../ref-tokens';
 export type TagTokens =
     | 'tag-background-color'
     | 'tag-border-color'
-    | 'tag-delete-button-icon-color'
-    | 'tag-delete-button-hover-background-color'
-    | 'tag-delete-icon-color'
-    | 'tag-clickable-hover-border-background-color'
-    | 'tag-clickable-hover-border-color'
-    | 'tag-clickable-hover-icon-color'
-    | 'tag-clickable-hover-background-color';
+    | 'tag-text-color'
+    | 'tag-icon-color'
+    | 'tag-hover-background-color'
+    | 'tag-hover-border-color'
+    | 'tag-hover-text-color'
+    | 'tag-hover-icon-color'
+    | 'tag-selected-background-color'
+    | 'tag-selected-border-color'
+    | 'tag-selected-text-color'
+    | 'tag-selected-icon-color'
+    | 'tag-decorative-01-background-color'
+    | 'tag-decorative-01-border-color'
+    | 'tag-decorative-01-text-color'
+    | 'tag-decorative-01-icon-color'
+    | 'tag-decorative-02-background-color'
+    | 'tag-decorative-02-border-color'
+    | 'tag-decorative-02-text-color'
+    | 'tag-decorative-02-icon-color'
+    | 'tag-decorative-03-background-color'
+    | 'tag-decorative-03-border-color'
+    | 'tag-decorative-03-text-color'
+    | 'tag-decorative-03-icon-color'
+    | 'tag-decorative-04-background-color'
+    | 'tag-decorative-04-border-color'
+    | 'tag-decorative-04-text-color'
+    | 'tag-decorative-04-icon-color'
+    | 'tag-decorative-05-background-color'
+    | 'tag-decorative-05-border-color'
+    | 'tag-decorative-05-text-color'
+    | 'tag-decorative-05-icon-color'
+    | 'tag-decorative-06-background-color'
+    | 'tag-decorative-06-border-color'
+    | 'tag-decorative-06-text-color'
+    | 'tag-decorative-06-icon-color'
+    | 'tag-decorative-07-background-color'
+    | 'tag-decorative-07-border-color'
+    | 'tag-decorative-07-text-color'
+    | 'tag-decorative-07-icon-color'
+    | 'tag-decorative-08-background-color'
+    | 'tag-decorative-08-border-color'
+    | 'tag-decorative-08-text-color'
+    | 'tag-decorative-08-icon-color'
+    | 'tag-decorative-09-background-color'
+    | 'tag-decorative-09-border-color'
+    | 'tag-decorative-09-text-color'
+    | 'tag-decorative-09-icon-color'
+    | 'tag-decorative-10-background-color'
+    | 'tag-decorative-10-border-color'
+    | 'tag-decorative-10-text-color'
+    | 'tag-decorative-10-icon-color';
 
 export type TagTokenValue = AliasTokens | RefTokens;
 
@@ -21,11 +64,57 @@ export type TagTokenMap = {
 export const defaultTagTokens: TagTokenMap = {
     'tag-background-color': 'color-neutral-05',
     'tag-border-color': 'color-neutral-50',
-    'tag-delete-button-icon-color': 'color-black',
-    'tag-delete-button-hover-background-color': 'color-neutral-15',
-    'tag-delete-icon-color': 'color-neutral-65',
-    'tag-clickable-hover-border-background-color': 'color-neutral-65',
-    'tag-clickable-hover-border-color': 'color-neutral-65',
-    'tag-clickable-hover-icon-color': 'color-black',
-    'tag-clickable-hover-background-color': 'color-neutral-15',
+    'tag-text-color': 'color-neutral-90',
+    'tag-icon-color': 'color-neutral-90',
+
+    'tag-hover-background-color': 'color-neutral-15',
+    'tag-hover-border-color': 'color-black',
+    'tag-hover-text-color': 'color-black',
+    'tag-hover-icon-color': 'color-black',
+
+    'tag-selected-background-color': 'color-brand-05',
+    'tag-selected-border-color': 'color-brand-70',
+    'tag-selected-text-color': 'color-brand-70',
+    'tag-selected-icon-color': 'color-brand-70',
+
+    'tag-decorative-01-background-color': 'color-decorative-01-05',
+    'tag-decorative-01-border-color': 'color-decorative-01-50',
+    'tag-decorative-01-text-color': 'color-decorative-01-70',
+    'tag-decorative-01-icon-color': 'color-decorative-01-70',
+    'tag-decorative-02-background-color': 'color-decorative-02-05',
+    'tag-decorative-02-border-color': 'color-decorative-02-50',
+    'tag-decorative-02-text-color': 'color-decorative-02-70',
+    'tag-decorative-02-icon-color': 'color-decorative-02-70',
+    'tag-decorative-03-background-color': 'color-decorative-03-05',
+    'tag-decorative-03-border-color': 'color-decorative-03-50',
+    'tag-decorative-03-text-color': 'color-decorative-03-70',
+    'tag-decorative-03-icon-color': 'color-decorative-03-70',
+    'tag-decorative-04-background-color': 'color-decorative-04-05',
+    'tag-decorative-04-border-color': 'color-decorative-04-50',
+    'tag-decorative-04-text-color': 'color-decorative-04-70',
+    'tag-decorative-04-icon-color': 'color-decorative-04-70',
+    'tag-decorative-05-background-color': 'color-decorative-05-05',
+    'tag-decorative-05-border-color': 'color-decorative-05-50',
+    'tag-decorative-05-text-color': 'color-decorative-05-70',
+    'tag-decorative-05-icon-color': 'color-decorative-05-70',
+    'tag-decorative-06-background-color': 'color-decorative-06-05',
+    'tag-decorative-06-border-color': 'color-decorative-06-50',
+    'tag-decorative-06-text-color': 'color-decorative-06-70',
+    'tag-decorative-06-icon-color': 'color-decorative-06-70',
+    'tag-decorative-07-background-color': 'color-decorative-07-05',
+    'tag-decorative-07-border-color': 'color-decorative-07-50',
+    'tag-decorative-07-text-color': 'color-decorative-07-70',
+    'tag-decorative-07-icon-color': 'color-decorative-07-70',
+    'tag-decorative-08-background-color': 'color-decorative-08-05',
+    'tag-decorative-08-border-color': 'color-decorative-08-50',
+    'tag-decorative-08-text-color': 'color-decorative-08-70',
+    'tag-decorative-08-icon-color': 'color-decorative-08-70',
+    'tag-decorative-09-background-color': 'color-decorative-09-05',
+    'tag-decorative-09-border-color': 'color-decorative-09-50',
+    'tag-decorative-09-text-color': 'color-decorative-09-70',
+    'tag-decorative-09-icon-color': 'color-decorative-09-70',
+    'tag-decorative-10-background-color': 'color-decorative-10-05',
+    'tag-decorative-10-border-color': 'color-decorative-10-50',
+    'tag-decorative-10-text-color': 'color-decorative-10-70',
+    'tag-decorative-10-icon-color': 'color-decorative-10-70',
 };
diff --git a/packages/react/src/themes/tokens/ref/palette-tokens.ts b/packages/react/src/themes/tokens/ref/palette-tokens.ts
index 5d4dceafb2..c2c10b04a5 100644
--- a/packages/react/src/themes/tokens/ref/palette-tokens.ts
+++ b/packages/react/src/themes/tokens/ref/palette-tokens.ts
@@ -88,7 +88,47 @@ export type PaletteTokens =
     | 'color-discovery-60'
     | 'color-discovery-70'
     | 'color-discovery-80'
-    | 'color-discovery-90';
+    | 'color-discovery-90'
+    | 'color-decorative-01-05'
+    | 'color-decorative-01-10'
+    | 'color-decorative-01-50'
+    | 'color-decorative-01-70'
+    | 'color-decorative-02-05'
+    | 'color-decorative-02-10'
+    | 'color-decorative-02-50'
+    | 'color-decorative-02-70'
+    | 'color-decorative-03-05'
+    | 'color-decorative-03-10'
+    | 'color-decorative-03-50'
+    | 'color-decorative-03-70'
+    | 'color-decorative-04-05'
+    | 'color-decorative-04-10'
+    | 'color-decorative-04-50'
+    | 'color-decorative-04-70'
+    | 'color-decorative-05-05'
+    | 'color-decorative-05-10'
+    | 'color-decorative-05-50'
+    | 'color-decorative-05-70'
+    | 'color-decorative-06-05'
+    | 'color-decorative-06-10'
+    | 'color-decorative-06-50'
+    | 'color-decorative-06-70'
+    | 'color-decorative-07-05'
+    | 'color-decorative-07-10'
+    | 'color-decorative-07-50'
+    | 'color-decorative-07-70'
+    | 'color-decorative-08-05'
+    | 'color-decorative-08-10'
+    | 'color-decorative-08-50'
+    | 'color-decorative-08-70'
+    | 'color-decorative-09-05'
+    | 'color-decorative-09-10'
+    | 'color-decorative-09-50'
+    | 'color-decorative-09-70'
+    | 'color-decorative-10-05'
+    | 'color-decorative-10-10'
+    | 'color-decorative-10-50'
+    | 'color-decorative-10-70';
 
 export type PaletteValue = string;
 
@@ -187,4 +227,44 @@ export const defaultPaletteTokens: PaletteTokenMap = {
     'color-discovery-70': '#3A1C60',
     'color-discovery-80': '#261340',
     'color-discovery-90': '#130920',
+    'color-decorative-01-05': '#EBE6EB',
+    'color-decorative-01-10': '#D7CCD8',
+    'color-decorative-01-50': '#38023B',
+    'color-decorative-01-70': '#220123',
+    'color-decorative-02-05': '#FAF3E7',
+    'color-decorative-02-10': '#F6E7D0',
+    'color-decorative-02-50': '#CE840C',
+    'color-decorative-02-70': '#7D520B',
+    'color-decorative-03-05': '#E7F0F1',
+    'color-decorative-03-10': '#D0E1E3',
+    'color-decorative-03-50': '#126773',
+    'color-decorative-03-70': '#0B3E45',
+    'color-decorative-04-05': '#F3E6E6',
+    'color-decorative-04-10': '#E8CCCC',
+    'color-decorative-04-50': '#960000',
+    'color-decorative-04-70': '#530000',
+    'color-decorative-05-05': '#F2F5E8',
+    'color-decorative-05-10': '#E5EBD2',
+    'color-decorative-05-50': '#7B9C1D',
+    'color-decorative-05-70': '#4A5E11',
+    'color-decorative-06-05': '#FAEDE6',
+    'color-decorative-06-10': '#F5DBCC',
+    'color-decorative-06-50': '#CD4B00',
+    'color-decorative-06-70': '#7B2D00',
+    'color-decorative-07-05': '#E7EDF5',
+    'color-decorative-07-10': '#CFDAEA',
+    'color-decorative-07-50': '#104697',
+    'color-decorative-07-70': '#0A2A5B',
+    'color-decorative-08-05': '#E6EDEB',
+    'color-decorative-08-10': '#CDDAD6',
+    'color-decorative-08-50': '#064633',
+    'color-decorative-08-70': '#042A1F',
+    'color-decorative-09-05': '#F2E9EF',
+    'color-decorative-09-10': '#E5D3DE',
+    'color-decorative-09-50': '#7E235A',
+    'color-decorative-09-70': '#4C1536',
+    'color-decorative-10-05': '#F1F0F7',
+    'color-decorative-10-10': '#E3E2EE',
+    'color-decorative-10-50': '#766DAB',
+    'color-decorative-10-70': '#444167',
 };
diff --git a/packages/storybook/stories/tag.stories.tsx b/packages/storybook/stories/tag.stories.tsx
index 52c2ddf82d..55bafd881f 100644
--- a/packages/storybook/stories/tag.stories.tsx
+++ b/packages/storybook/stories/tag.stories.tsx
@@ -1,86 +1,100 @@
-import { Tag, TagProps, TagValue } from '@equisoft/design-elements-react';
-import { StoryFn as Story } from '@storybook/react';
-import { ReactElement, useRef, useState } from 'react';
+import { Tag, TagValue } from '@equisoft/design-elements-react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useRef } from 'react';
 import { rawCodeParameters } from './utils/parameters';
 
-export default {
-    title: 'Components/Tag',
+const TagMeta: Meta<typeof Tag> = {
     component: Tag,
-};
-
-export const Normal: Story = (): ReactElement => {
-    const tags: TagValue[] = [
-        { label: 'Tag 1', id: '1' },
-        { label: 'Tag 2', id: '2' },
-        { label: 'Tag 3', id: '3' },
-    ];
+    title: 'Components/Tags/Tag',
+    args: {
+        value: {
+            label: 'Tag',
+        },
+        size: 'medium',
+        iconName: undefined,
+        color: 'default',
+        onRemove: undefined,
+    },
+    argTypes: {
+        value: {
+            control: {
+                type: 'object',
+            },
+        },
+        size: {
+            control: {
+                type: 'select',
 
-    return (
-        <>
-            <div>
-                {tags.map((tag) => <Tag key={tag.id} value={tag} size="small" />)}
-            </div>
-            <br />
-            <div>
-                {tags.map((tag) => <Tag key={tag.id} value={tag} size="medium" />)}
-            </div>
-        </>
-    );
+            },
+            defaultValue: 'medium',
+        },
+        iconName: {
+            control: {
+                type: 'select',
+            },
+        },
+        color: {
+            control: {
+                type: 'select',
+            },
+        },
+        onRemove: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+    render: (args) => (
+        <Tag
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...args}
+            value={{
+                label: args.value?.label || 'Tag',
+            }}
+        />
+    ),
 };
 
-export const Small: Story = (): ReactElement => (
-    <Tag value={{ label: 'Tag' }} size="small" />
-);
+export default TagMeta;
+type Story = StoryObj<typeof Tag>;
 
-export const Medium: Story = (): ReactElement => (
-    <Tag value={{ label: 'Tag' }} size="medium" />
-);
-
-export const WithIcons: Story = (): ReactElement => {
-    const options: TagProps[] = [
-        { value: { label: 'Tag 1', id: 'tag1' }, iconName: 'calendar' },
-        { value: { label: 'Tag 2', id: 'tag2' }, iconName: 'home' },
-        { value: { label: 'Tag 3', id: 'tag3' }, iconName: 'info' },
-    ];
-
-    return (
-        <div>
-            {options.map(({ iconName, value }) => <Tag key={value.id} iconName={iconName} value={value} />)}
-        </div>
-    );
+export const Default: Story = {
+    ...TagMeta,
 };
 
-export const Deletable: Story = (): ReactElement => {
-    const initialOptions: TagValue[] = [
-        { label: 'Tag 1', id: 'tag1' },
-        { label: 'Tag 2', id: 'tag2' },
-        { label: 'Tag 3', id: 'tag3' },
-    ];
-    const [options, setOptions] = useState(initialOptions);
+export const Small: Story = {
+    ...Default,
+    args: {
+        size: 'small',
+    },
+};
 
-    function handleDelete(tag: TagValue): void {
-        const filteredOptionsArray = [...options].filter(({ id }) => id !== tag.id);
-        setOptions(filteredOptionsArray);
-    }
+export const Medium: Story = {
+    ...Default,
+    args: {
+        size: 'medium',
+    },
+};
 
-    return (
-        <div>
-            {options.map((tag) => <Tag key={tag.id} value={tag} onDelete={handleDelete} />)}
-        </div>
-    );
+export const WithIcons: Story = {
+    ...Default,
+    args: {
+        iconName: 'copy',
+    },
 };
 
-export const Clickable: Story = () => {
-    function handleClick(tag: TagValue): void {
-        console.info(`Clicked on ${tag.label}`);
-    }
+export const Removable: Story = {
+    ...Default,
+    args: {
+        onRemove: (tag: TagValue) => console.info(`Removed ${tag.label}`),
+    },
+};
 
-    return (
-        <>
-            <Tag key="small" iconName="copy" size="small" onClick={handleClick} value={{ label: 'Tag 1' }} />
-            <Tag key="medium" iconName="mail" size="medium" onClick={handleClick} value={{ label: 'Tag 2' }} />
-        </>
-    );
+export const Colored: Story = {
+    ...Default,
+    args: {
+        color: 'decorative-01',
+    },
 };
 
 export const WithRef: Story = () => {
diff --git a/packages/storybook/stories/toggle-tag.stories.tsx b/packages/storybook/stories/toggle-tag.stories.tsx
new file mode 100644
index 0000000000..e9c40b31f9
--- /dev/null
+++ b/packages/storybook/stories/toggle-tag.stories.tsx
@@ -0,0 +1,88 @@
+import { ToggleTagValue, ToggleTag } from '@equisoft/design-elements-react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useRef } from 'react';
+import { rawCodeParameters } from './utils/parameters';
+
+const ToggleTagMeta: Meta<typeof ToggleTag> = {
+    component: ToggleTag,
+    title: 'Components/Tags/ToggleTag',
+    args: {
+        value: {
+            label: 'Toggle Tag',
+        },
+        size: 'medium',
+        iconName: undefined,
+        selected: undefined,
+        onClick: (tag: ToggleTagValue) => console.info(`Clicked on ${tag.label}`),
+    },
+    argTypes: {
+        size: {
+            control: {
+                type: 'select',
+            },
+            defaultValue: 'medium',
+        },
+        value: {
+            control: {
+                type: 'object',
+            },
+        },
+        iconName: {
+            control: {
+                type: 'select',
+            },
+        },
+        selected: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+    render: (args) => (
+        <ToggleTag
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...args}
+            value={{
+                label: args.value?.label || 'Toggle Tag',
+            }}
+        />
+    ),
+};
+
+export default ToggleTagMeta;
+type Story = StoryObj<typeof ToggleTag>;
+
+export const Default: Story = {
+    ...ToggleTagMeta,
+};
+
+export const Small: Story = {
+    ...Default,
+    args: {
+        size: 'small',
+    },
+};
+
+export const Medium: Story = {
+    ...Default,
+    args: {
+        size: 'medium',
+    },
+};
+
+export const WithIcons: Story = {
+    ...Default,
+    args: {
+        iconName: 'copy',
+    },
+};
+
+export const WithRef: Story = () => {
+    const ref = useRef(null);
+
+    return (
+        <ToggleTag ref={ref} key="small" iconName="copy" size="small" value={{ label: 'Tag 1' }} />
+    );
+};
+
+WithRef.parameters = rawCodeParameters;