diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html
index fb8b4b163..51944ac6d 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html
@@ -16,7 +16,7 @@
     <td>Text to be placed next inside the tag.</td>
   </tr>
   <tr>
-    <td>labelPosition: string</td>
+    <td>labelPosition: 'before' | 'after'</td>
     <td><code>'after'</code></td>
     <td>Whether the label should appear after or before the icon.</td>
   </tr>
@@ -38,22 +38,17 @@
       "href". Component will show some visual feedback on hover.
     </td>
   </tr>
-  <tr>
-    <td>tabIndexValue: number</td>
-    <td><code>0</code></td>
-    <td>Value of the tabindex.</td>
-  </tr>
   <tr>
     <td>onClick: EventEmitter</td>
     <td></td>
     <td>
-      If defined, the tag will be displayed as a button. This function will be
-      called when the user clicks the tag. Component will show some visual
-      feedback on hover.
+      If defined, the tag will be displayed as a button. This event will emit in
+      case the user clicks the tag. Component will show some visual feedback on
+      hover.
     </td>
   </tr>
   <tr>
-    <td>margin: any (string | object)</td>
+    <td>margin: string | object</td>
     <td></td>
     <td>
       Size of the margin to be applied to the component ('xxsmall' | 'xsmall' |
@@ -63,8 +58,8 @@
     </td>
   </tr>
   <tr>
-    <td>size: any (string | object)</td>
-    <td><code>'medium'</code></td>
+    <td>size: string</td>
+    <td><code>'fitContent'</code></td>
     <td>
       Size of the component ('small' | 'medium' | 'large' | 'fillParent' |
       'fitContent').
@@ -77,4 +72,9 @@
     </td>
     <td>If true, the page is opened in a new browser tab.</td>
   </tr>
+  <tr>
+    <td>tabIndexValue: number</td>
+    <td><code>0</code></td>
+    <td>Value of the tabindex.</td>
+  </tr>
 </dxc-table>
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts
index aaaef42ff..e7caf1f43 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts
@@ -10,7 +10,6 @@ import { css } from "emotion";
 import { CssUtils } from "../utils";
 import { BackgroundProviderService } from "../background-provider/service/background-provider.service";
 
-type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
 type Space =
   | "xxsmall"
   | "xsmall"
@@ -60,7 +59,8 @@ export class DxcBoxComponent implements OnInit {
   /**
    * Size of the component.
    */
-  @Input() size: Size = "fitContent";
+  @Input() size: "small" | "medium" | "large" | "fillParent" | "fitContent" =
+    "fitContent";
   currentBackgroundColor;
 
   sizes = {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md
index 985aae1ef..9a7e794fa 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md
@@ -54,7 +54,7 @@ The API properties are the following:
     </tr>
     <tr>
         <td>@Input<br>iconBgColor: string</td>
-        <td><code>'black'</code></td>
+        <td><code>'#5f249f'</code></td>
         <td>Background color of the icon section of the tag.</td>
     </tr>
     <tr>
@@ -70,7 +70,7 @@ The API properties are the following:
             Component will show some visual feedback on hover.</td>
     </tr>
     <tr>
-        <td>@Input<br>margin: any (string | object)</td>
+        <td>@Input<br>margin: string | object</td>
         <td></td>
         <td>
             Size of the margin to be applied to the component ('xxsmall' | 
@@ -80,8 +80,8 @@ The API properties are the following:
         </td>
     </tr>
     <tr>
-        <td>@Input<br>size: any (string | object)</td>
-        <td><code>'medium'</code></td>
+        <td>@Input<br>size: string</td>
+        <td><code>'fitContent'</code></td>
         <td>Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent').</td>
     </tr>
     <tr>
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts
index ceef7272d..135a5495c 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts
@@ -20,6 +20,20 @@ import {
 import { ContentChildren, ChangeDetectorRef } from "@angular/core";
 import { DxcTagIconComponent } from "./dxc-tag-icon/dxc-tag-icon.component";
 
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
 @Component({
   selector: "dxc-tag",
   templateUrl: "./dxc-tag.component.html",
@@ -27,14 +41,35 @@ import { DxcTagIconComponent } from "./dxc-tag-icon/dxc-tag-icon.component";
 })
 export class DxcTagComponent implements OnInit {
   isHovered = false;
-
-  @Input() size: string;
-  @Input() iconSrc: string;
-  @Input() iconBgColor: string;
+  /**
+   * Text to be placed next inside the tag.
+   */
   @Input() label: string;
-  @Input() labelPosition: string;
+  /**
+   * @deprecated URL of the icon.
+   */
+  @Input() iconSrc: string;
+  /**
+   * Background color of the icon section of the tag.
+   */
+  @Input() iconBgColor: string = "#5f249f";
+  /**
+   * Whether the label should appear after or before the icon.
+   */
+  @Input() labelPosition: "before" | "after" = "after";
+  /**
+   * If defined, the tag will be displayed as an anchor, using this prop as "href".
+   * Component will show some visual feedback on hover.
+   */
   @Input() linkHref: string;
-  @Input() margin: any;
+  /**
+   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+   */
+  @Input() margin: Space | Margin;
+  /**
+   * If true, the page is opened in a new browser tab.
+   */
   @Input()
   get newWindow(): boolean {
     return this._newWindow;
@@ -42,7 +77,15 @@ export class DxcTagComponent implements OnInit {
   set newWindow(value: boolean) {
     this._newWindow = coerceBooleanProperty(value);
   }
-  private _newWindow;
+  private _newWindow = false;
+  /**
+   * Size of the component.
+   */
+  @Input() size: "small" | "medium" | "large" | "fillParent" | "fitContent" =
+    "fitContent";
+  /**
+   * Value of the tabindex.
+   */
   @Input()
   get tabIndexValue(): number {
     return this._tabIndexValue;
@@ -50,9 +93,12 @@ export class DxcTagComponent implements OnInit {
   set tabIndexValue(value: number) {
     this._tabIndexValue = coerceNumberProperty(value);
   }
-  private _tabIndexValue;
-
-  @Output() onClick = new EventEmitter<any>();
+  private _tabIndexValue = 0;
+  /**
+   * If defined, the tag will be displayed as a button. This event will emit in case the user clicks the tag.
+   * Component will show some visual feedback on hover.
+   */
+  @Output() onClick: EventEmitter<void> = new EventEmitter<void>();
 
   isClickDefined = false;
   shadowDepth: string;