diff --git a/packages/core/src/components/tag/tag.css b/packages/core/src/components/tag/tag.css
index ea10002d37..1aa3bdcd8e 100644
--- a/packages/core/src/components/tag/tag.css
+++ b/packages/core/src/components/tag/tag.css
@@ -10,7 +10,6 @@
   flex-direction: row-reverse;
   font-size: var(--fontsize-body-s);
   outline: none;
-  padding: 0 var(--spacing-2-xs) 0 0;
 }
 
 .hds-tag:focus,
@@ -18,6 +17,19 @@
   box-shadow: 0 0 0 3px var(--tag-focus-outline-color);
 }
 
+.hds-tag[tabindex='0'] {
+  cursor: pointer;
+}
+
+.hds-tag__label {
+  line-height: var(--lineheight-m);
+  padding: var(--spacing-3-xs) var(--spacing-2-xs);
+}
+
+.hds-tag__label:not(:only-child) {
+  padding: 0 var(--spacing-2-xs) 0 0;
+}
+
 .hds-tag__delete-button {
  display: flex;
  outline: none;
diff --git a/packages/core/src/components/tag/tag.stories.js b/packages/core/src/components/tag/tag.stories.js
index 914e48e034..a11f0cb87b 100644
--- a/packages/core/src/components/tag/tag.stories.js
+++ b/packages/core/src/components/tag/tag.stories.js
@@ -8,7 +8,19 @@ export default {
 
 export const Default = () => `
   <div class="hds-tag">
-    <span>Label</span>
+    <span class="hds-tag__label">Label</span>
+  </div>
+`;
+
+export const Clickable = () => `
+  <div class="hds-tag" role="link" tabindex="0" onclick="">
+    <span class="hds-tag__label">Label</span>
+  </div>
+`;
+
+export const Deletable = () => `
+  <div class="hds-tag">
+    <span class="hds-tag__label">Label</span>
     <button aria-label="Delete item" class="hds-tag__delete-button button-reset">
         <span aria-hidden="true" class="hds-icon hds-icon--cross"></span>
     </button>
diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
index 43c960851d..dd9b1fa616 100644
--- a/packages/react/rollup.config.js
+++ b/packages/react/rollup.config.js
@@ -91,6 +91,7 @@ export default [
       'components/Section/index': 'src/components/section/index.ts',
       'components/Select/index': 'src/components/dropdown/select/index.ts',
       'components/StatusLabel/index': 'src/components/statusLabel/index.ts',
+      'components/Tag/index': 'src/components/tag/index.ts',
       'components/TextInput/index': 'src/components/textInput/index.ts',
       'components/Textarea/index': 'src/components/textarea/index.ts',
       'components/Tooltip/index': 'src/components/tooltip/index.ts',
diff --git a/packages/react/src/components/tag/Tag.module.scss b/packages/react/src/components/tag/Tag.module.scss
index bcdfa1f1c6..1fbe4a17df 100644
--- a/packages/react/src/components/tag/Tag.module.scss
+++ b/packages/react/src/components/tag/Tag.module.scss
@@ -4,6 +4,10 @@
   composes: hds-tag from 'hds-core/lib/components/tag/tag.css';
 }
 
+.label {
+  composes: hds-tag__label from 'hds-core/lib/components/tag/tag.css';
+}
+
 .deleteButton {
   @extend %buttonReset;
   composes: hds-tag__delete-button from 'hds-core/lib/components/tag/tag.css';
diff --git a/packages/react/src/components/tag/Tag.stories.tsx b/packages/react/src/components/tag/Tag.stories.tsx
index 120f836add..1ee3c4e824 100644
--- a/packages/react/src/components/tag/Tag.stories.tsx
+++ b/packages/react/src/components/tag/Tag.stories.tsx
@@ -6,9 +6,57 @@ import { Tag } from './Tag';
 export default {
   component: Tag,
   title: 'Components/Tag',
+  parameters: {
+    controls: { expanded: true },
+  },
+  args: {
+    children: 'Americum',
+  },
 };
 
-export const Example = () => {
-  const label = 'Americum';
-  return <Tag deleteButtonAriaLabel={`Delete: ${label}`} onDelete={() => action(`Delete: ${label}`)} label={label} />;
+export const Default = (args) => <Tag {...args} />;
+
+export const Clickable = (args) => (
+  <>
+    <Tag {...args} label="Link" role="link" id="link" onClick={() => action(`Click: ${args.children}`)()}>
+      {args.children}
+    </Tag>
+    <Tag
+      {...args}
+      label="Button"
+      role="button"
+      id="button"
+      style={{ marginLeft: 'var(--spacing-s)' }}
+      onClick={() => action(`Click: ${args.children}`)()}
+    >
+      {args.children}
+    </Tag>
+  </>
+);
+Clickable.storyName = 'Clickable tag';
+
+export const Deletable = (args) => {
+  return (
+    <Tag
+      {...args}
+      deleteButtonAriaLabel={`Delete: ${args.label}`}
+      onDelete={() => action(`Delete: ${args.children}`)()}
+    >
+      {args.children}
+    </Tag>
+  );
+};
+Deletable.storyName = 'Deletable tag';
+
+export const CustomTheme = (args) => (
+  <Tag {...args} onClick={() => action(`Click: ${args.children}`)()}>
+    {args.children}
+  </Tag>
+);
+CustomTheme.args = {
+  theme: {
+    '--tag-background': 'var(--color-engel)',
+    '--tag-color': 'var(--color-black-90)',
+    '--tag-focus-outline-color': 'var(--color-black-90)',
+  },
 };
diff --git a/packages/react/src/components/tag/Tag.test.tsx b/packages/react/src/components/tag/Tag.test.tsx
index 76fff2d604..a5f3d40c6e 100644
--- a/packages/react/src/components/tag/Tag.test.tsx
+++ b/packages/react/src/components/tag/Tag.test.tsx
@@ -5,7 +5,7 @@ import { Tag } from './Tag';
 
 describe('<Tag /> spec', () => {
   it('renders the component', () => {
-    const { asFragment } = render(<Tag />);
+    const { asFragment } = render(<Tag>Foo</Tag>);
     expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react/src/components/tag/Tag.tsx b/packages/react/src/components/tag/Tag.tsx
index fc779070bd..61e8639037 100644
--- a/packages/react/src/components/tag/Tag.tsx
+++ b/packages/react/src/components/tag/Tag.tsx
@@ -7,8 +7,20 @@ import 'hds-core';
 import styles from './Tag.module.scss';
 import { IconCross } from '../../icons';
 import classNames from '../../utils/classNames';
+import { useTheme } from '../../hooks/useTheme';
+import getModulesClassName from '../../utils/getModulesClassName';
+
+export interface TagCustomTheme {
+  '--tag-background'?: string;
+  '--tag-color'?: string;
+  '--tag-focus-outline-color'?: string;
+}
 
 export type TagProps = {
+  /**
+   * The label for the tag
+   */
+  children: React.ReactNode;
   /**
    * Additional class names to apply to the tag
    */
@@ -25,56 +37,85 @@ export type TagProps = {
    * Used to generate the first part of the id on the elements.
    */
   id?: string;
-  /**
-   * The label for the tag
-   */
-  label: React.ReactNode;
   /**
    * Props that will be passed to the label `<span>` element.
    */
   labelProps?: React.ComponentPropsWithoutRef<'span'>;
   /**
-   * Callback function fired when the delete icon is clicked. If set, the delete icon will be shown.
+   * Callback function fired when the tag is clicked. If set, the tag will be clickable.
+   */
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
+  /**
+   * Callback function fired when the delete icon is clicked. If set, a delete button will be shown.
    */
   onDelete?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * Sets the role of the tag when it's clickable. Uses 'link' by default.
+   */
+  role?: 'link' | 'button';
   /**
    * Label that is only visible to screen readers. Can be used to to give screen reader users additional information about the tag.
    */
   srOnlyLabel?: string;
+  /**
+   * Custom theme styles
+   */
+  theme?: TagCustomTheme;
 };
 
 export const Tag = React.forwardRef<HTMLDivElement, TagProps>(
   (
     {
+      children,
       className,
       deleteButtonAriaLabel,
       deleteButtonProps,
       id = 'hds-tag',
-      label,
       labelProps,
+      onClick,
       onDelete,
+      role = 'link',
       srOnlyLabel,
+      theme,
       ...rest
     }: TagProps,
     ref: React.Ref<HTMLDivElement>,
-  ) => (
-    <div id={id} className={classNames(styles.tag, className)} ref={ref} {...rest}>
-      <span id={id && `${id}-label`} {...labelProps}>
-        {srOnlyLabel && <span className={styles.visuallyHidden}>{srOnlyLabel}</span>}
-        <span aria-hidden={!!srOnlyLabel}>{label}</span>
-      </span>
-      {typeof onDelete === 'function' && (
-        <button
-          {...deleteButtonProps}
-          id={id && `${id}-delete-button`}
-          type="button"
-          className={styles.deleteButton}
-          aria-label={deleteButtonAriaLabel}
-          onClick={onDelete}
-        >
-          <IconCross className={styles.icon} />
-        </button>
-      )}
-    </div>
-  ),
+  ) => {
+    // custom theme class that is applied to the root element
+    const customThemeClass = useTheme<TagCustomTheme>(getModulesClassName(styles.tag), theme);
+    const clickable = typeof onClick === 'function';
+    const deletable = typeof onDelete === 'function';
+
+    // handle key down
+    const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter' || event.key === ' ') onClick(event);
+    };
+
+    return (
+      <div
+        id={id}
+        className={classNames(styles.tag, customThemeClass, className)}
+        ref={ref}
+        {...(clickable && { tabIndex: 0, role, onClick, onKeyDown })}
+        {...rest}
+      >
+        <span id={id && `${id}-label`} className={styles.label} {...labelProps}>
+          {srOnlyLabel && <span className={styles.visuallyHidden}>{srOnlyLabel}</span>}
+          <span aria-hidden={!!srOnlyLabel}>{children}</span>
+        </span>
+        {deletable && (
+          <button
+            {...deleteButtonProps}
+            id={id && `${id}-delete-button`}
+            type="button"
+            className={styles.deleteButton}
+            aria-label={deleteButtonAriaLabel}
+            onClick={onDelete}
+          >
+            <IconCross className={styles.icon} aria-hidden />
+          </button>
+        )}
+      </div>
+    );
+  },
 );
diff --git a/packages/react/src/components/tag/__snapshots__/Tag.test.tsx.snap b/packages/react/src/components/tag/__snapshots__/Tag.test.tsx.snap
index b0c97a3de9..16a56cd98d 100644
--- a/packages/react/src/components/tag/__snapshots__/Tag.test.tsx.snap
+++ b/packages/react/src/components/tag/__snapshots__/Tag.test.tsx.snap
@@ -7,11 +7,14 @@ exports[`<Tag /> spec renders the component 1`] = `
     id="hds-tag"
   >
     <span
+      class="label"
       id="hds-tag-label"
     >
       <span
         aria-hidden="false"
-      />
+      >
+        Foo
+      </span>
     </span>
   </div>
 </DocumentFragment>
diff --git a/packages/react/src/hooks/useTheme.tsx b/packages/react/src/hooks/useTheme.tsx
index c291868889..c23109dd51 100644
--- a/packages/react/src/hooks/useTheme.tsx
+++ b/packages/react/src/hooks/useTheme.tsx
@@ -12,13 +12,14 @@ const setComponentTheme = <T,>(selector: string, theme: T, customClass: string):
   if (typeof window === 'undefined') return;
 
   // checks if the given css rule contains the custom class selector
-  const hasCustomRule = (rule: CSSRule): boolean => rule.cssText.includes(`${selector}.${customClass}`);
+  const hasCustomRule = (rule: CSSStyleRule): boolean => rule.selectorText?.includes(`${selector}.${customClass}`);
 
   try {
     const { styleSheets } = document;
     // the index of the parent stylesheet
     const parentIndex = [...styleSheets].findIndex(
-      (styleSheet) => [...styleSheet.cssRules].findIndex((rule) => rule.cssText.includes(selector)) >= 0,
+      (styleSheet) =>
+        [...styleSheet.cssRules].findIndex((rule: CSSStyleRule) => rule.selectorText?.includes(selector)) >= 0,
     );
     // style sheet containing the css rules for the selector
     const parentStyleSheet = styleSheets[parentIndex];
diff --git a/packages/react/src/internal/selectedItems/SelectedItems.tsx b/packages/react/src/internal/selectedItems/SelectedItems.tsx
index 6fb5567545..f46eb39638 100644
--- a/packages/react/src/internal/selectedItems/SelectedItems.tsx
+++ b/packages/react/src/internal/selectedItems/SelectedItems.tsx
@@ -222,7 +222,6 @@ export const SelectedItems = <OptionType,>({
               key={selectedItemLabel}
               className={styles.tag}
               id={tagId}
-              label={selectedItemLabel}
               labelProps={{ 'aria-labelledby': `${dropdownId}-label ${tagId}-label` }}
               deleteButtonAriaLabel={replaceTokenWithValue(removeButtonAriaLabel, selectedItemLabel)}
               // remove delete button from focus order
@@ -243,7 +242,9 @@ export const SelectedItems = <OptionType,>({
                 },
                 onFocus: () => setActiveIndex(index),
               })}
-            />
+            >
+              {selectedItemLabel}
+            </Tag>
           );
         })}
         <span
diff --git a/packages/react/src/utils/getModulesClassName.ts b/packages/react/src/utils/getModulesClassName.ts
new file mode 100644
index 0000000000..5db04645fe
--- /dev/null
+++ b/packages/react/src/utils/getModulesClassName.ts
@@ -0,0 +1,6 @@
+/**
+ * Helper that returns the css/scss module class name without other classes names.
+ * E.g. using composes in a rule adds the composed class name to the selector.
+ * @param className
+ */
+export default (className: string): string => className.substring(0, className.indexOf(' '));
diff --git a/site/docs/components/component_overview.mdx b/site/docs/components/component_overview.mdx
index 46ca3e3be4..2c297b6ee5 100644
--- a/site/docs/components/component_overview.mdx
+++ b/site/docs/components/component_overview.mdx
@@ -67,6 +67,7 @@ Dropdown                                                         | <StatusLabel
 [Radio button](/components/radio-button)                         | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/components-radio-button--default) | [<IconCheck/>](/storybook/react/?path=/story/components-radiobutton--default)
 [Select](/components/dropdown)                                   | <StatusLabel type="info">Stable</StatusLabel>        |                                                                               | [<IconCheck/>](/storybook/react/?path=/story/components-dropdowns-select--default)
 [Status label](/components/status-label)                         | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/components-status-label--default) | [<IconCheck/>](/storybook/react/?path=/story/components-status-label)
+[Tag](/components/tag)                                           | <StatusLabel type="alert">Pre-release</StatusLabel>  | [<IconCheck/>](/storybook/core/?path=/story/components-tag--default)          | [<IconCheck/>](/storybook/react/?path=/story/components-tag--default)
 [Text input](/components/text-field)                             | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/components-textinput--default)    | [<IconCheck/>](/storybook/react/?path=/story/components-textinput--default)
 [Text area](/components/text-field#text-area)                    | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/components-text-input--default)   | [<IconCheck/>](/storybook/react/?path=/story/components-textarea--default)
 [Tooltip](/components/tooltip)                                   | <StatusLabel type="alert">Pre-release</StatusLabel>  |                                                                               | [<IconCheck/>](/storybook/react/?path=/story/components-tooltip--default)
diff --git a/site/docs/components/tag.mdx b/site/docs/components/tag.mdx
new file mode 100644
index 0000000000..2a677f0ac5
--- /dev/null
+++ b/site/docs/components/tag.mdx
@@ -0,0 +1,160 @@
+---
+name: Tag
+menu: Components
+route: /components/tag
+---
+
+import { Playground } from "docz";
+import { Tag, StatusLabel } from "hds-react";
+
+import LargeParagraph from "../../src/components/LargeParagraph";
+import Link from "../../src/components/Link";
+
+# Tag
+
+<StatusLabel>New</StatusLabel>
+<StatusLabel type="alert" style={{marginLeft: 'var(--spacing-xs)'}}>Pre-release</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel> 
+
+<LargeParagraph>
+  Tags are used to show attributes of an object or element such as categories. HDS also uses Tags to present filters selected for searches.
+</LargeParagraph>
+
+## Principles
+
+- **Tags are meant for presenting object attributes and filters.** If you are presenting status information, use [Status label component](/components/status-label) instead.
+- Keep labels short and concise. Use 1-2 words at maximum and do not use labels expanding to two rows.
+- Do not use icons inside Tag labels.
+- Tags are often related to some other element on the page (e.g. table row or search field as filters). Aim to keep tags and their related elements close to each other so the user can easily interpret the relation.
+- Unlike status labels, **tags can be configured to be clickable and deletable**. You can use this feature to create removable filters/selections or links to category filtered pages.
+
+## Accessibility
+
+- For interactable Tags you must set a descriptive `aria-label` for assistive technologies so the user understands what happens if the Tag is clicked. For example `aria-label="Move to category: <category name>"`.
+- **It is advisable to use colour combinations provided by the implementation.** These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to [colour guidelines](/design-tokens/colour "Colour") to ensure accessibility.
+- If you are customising tag colours, make sure they are easily distinguishable from [HDS UI Colours](/design-tokens/colour#ui-colours). These colours are reserved to present UI state and status information in applications using HDS.
+- Remember that colour should never be the only way of conveying information. Make sure the meaning of the status label is clearly described by the label text. Refer to <Link href="https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html" external>WCAG 2.1 Use of Color guideline</Link> for more information.
+
+### Which role attribute should be used with Tags?
+- HDS Tags can be clickable. In this case, it needs either a `role=“link”` or  `role=“button”` as an attribute. The role value should be decided as follows:
+  - If the user’s focus is moved to another location or another page is opened, the role should be `link`. Example: The user clicks a Tag labeled as "News". The tag takes the user to a new page which lists all items tagged as "News".
+  - If, however, the tag will result in the page’s content being dynamically changed (i.e. Tag triggers an action), use `role=“button”`. Example: Clicking the tag will cause a search below to be filtered.
+
+## Usage and variations
+
+### Basic tags
+
+By default, Tags are non-interactable elements. They only include a label and do not have any specific styling.
+
+<Playground>
+<Tag>News</Tag>
+<Tag style={{ marginLeft: 'var(--spacing-s)' }}>Announcements</Tag>
+</Playground>
+
+##### Core:
+```html
+<div class="hds-tag">
+  <span class="hds-tag__label">News</span>
+</div>
+
+<div class="hds-tag">
+  <span class="hds-tag__label">Announcements</span>
+</div>
+```
+
+##### React:
+```tsx
+<Tag>News</Tag>
+<Tag>Announcements</Tag>
+```
+
+### Clickable tags
+
+Tags can be configured to be interactable by giving them an `onClick` function prop. This way Tags can act as links or actions. Since these Tags are fully interactable they can be also focused and receive default HDS focus indicator styling.
+
+Remember to add descriptive `aria-label` to clearly indicate the link target or action to assistive technologies.
+
+<Playground>
+<Tag role="link" onClick={() => {}} aria-label="Move to category: News">News</Tag>
+<Tag role="link" onClick={() => {}} aria-label="Move to category: Announcements" style={{ marginLeft: 'var(--spacing-s)' }}>Announcements</Tag>
+</Playground>
+
+##### Core:
+```html
+<div class="hds-tag" role="link" tabindex="0" onclick="" aria-label="Move to category: News">
+  <span class="hds-tag__label">News</span>
+</div>
+
+<div class="hds-tag" role="link" tabindex="0" onclick="" aria-label="Move to category: Announcements">
+  <span class="hds-tag__label">Announcements</span>
+</div>
+```
+
+##### React:
+```tsx
+<Tag 
+  role="link" 
+  onClick={() => {}} 
+  aria-label="Move to category: News" 
+>News</Tag>
+
+<Tag 
+  role="link" 
+  onClick={() => {}} 
+  aria-label="Move to category: Announcements" 
+>Announcements</Tag>
+```
+
+### Deletable tags
+
+Tags can be configured to be deletable by giving them an `onDelete` function prop. This enables a delete icon inside the Tag. Deleting can be useful in situations where Tags are used as filters (e.g. for search).
+
+Remember to add descriptive `aria-label` to the delete button to clearly indicate what the user is deleting when triggering the action.
+
+<Playground>
+<Tag onDelete={() => {}} deleteButtonAriaLabel="Delete filter: News">News</Tag>
+<Tag onDelete={() => {}} deleteButtonAriaLabel="Delete filter: Announcements" style={{ marginLeft: 'var(--spacing-s)' }}>Announcements</Tag>
+</Playground>
+
+##### Core:
+```html
+<div class="hds-tag">
+  <span class="hds-tag__label">News</span>
+  <button aria-label="Delete filter: News" class="hds-tag__delete-button button-reset">
+      <span aria-hidden="true" class="hds-icon hds-icon--cross"></span>
+  </button>
+</div>
+
+<div class="hds-tag">
+  <span class="hds-tag__label">Announcements</span>
+  <button aria-label="Delete filter: Announcements" class="hds-tag__delete-button button-reset">
+      <span aria-hidden="true" class="hds-icon hds-icon--cross"></span>
+  </button>
+</div>
+```
+
+##### React:
+```tsx
+<Tag 
+  onDelete={() => {}} 
+  deleteButtonAriaLabel="Delete filter: News" 
+>News</Tag>
+
+<Tag 
+  onDelete={() => {}} 
+  deleteButtonAriaLabel="Delete filter: Announcements" 
+>Announcements</Tag>
+```
+
+
+## Demos & API
+
+### Core
+
+[Tags in hds-core](/storybook/core/?path=/story/components-tag--default)
+
+### React
+
+[Tags in hds-react](/storybook/react/?path=/story/components-tag--default)
+
+[Tags API](/storybook/react/?path=/docs/components-tag--default)