diff --git a/docs/components/callout.mdx b/docs/components/callout.mdx
index 2fb07ac..df2614e 100644
--- a/docs/components/callout.mdx
+++ b/docs/components/callout.mdx
@@ -45,7 +45,7 @@ import { CheckCircleIcon } from '@heroicons/react/solid'
 
 ##### <span name="floating-nav">Variant</span>
 
-With the prop <Tag text='variant' /> you can customize the color of the callout
+With the prop <TagDocs text='variant' /> you can customize the color of the callout
 
 <Playground className="gap-y-2">
     <Flex className="flex-col" gap="4">
@@ -75,7 +75,7 @@ export default function App() {
 
 ##### <span name="floating-nav">Icon</span>
 
-With the prop <Tag text='icon' /> you can render a custom icon in the callout before the title, is a optional
+With the prop <TagDocs text='icon' /> you can render a custom icon in the callout before the title, is a optional
 prop
 
 <Playground className="gap-y-2">
@@ -102,7 +102,7 @@ export default function App() {
 
 ##### <span name="floating-nav">Title</span>
 
-With the props <Tag text='title' /> you can provide a title of the callout and this prop is the only required
+With the props <TagDocs text='title' /> you can provide a title of the callout and this prop is the only required
 of the component
 
 <Playground className="gap-y-2">
diff --git a/docs/components/confirm-dialog.mdx b/docs/components/confirm-dialog.mdx
index fe066a7..e4325bd 100644
--- a/docs/components/confirm-dialog.mdx
+++ b/docs/components/confirm-dialog.mdx
@@ -130,7 +130,7 @@ we can avoid any issues with the ConfirmDialog component not being fully initial
 
 ##### <span name="floating-nav">Title</span>
 
-The prop <Tag text='title' /> is used to display a descriptive title in the confirmation dialog
+The prop <TagDocs text='title' /> is used to display a descriptive title in the confirmation dialog
 
 <Playground>
  <ConfirmDialogCustom title='Example title' />
@@ -155,7 +155,7 @@ The prop <Tag text='title' /> is used to display a descriptive title in the conf
 
 ##### <span name="floating-nav">Text Confirm Btn</span>
 
-The prop <Tag text='textConfirmBtn' /> is used to define the text of the confirmation button in the dialog box
+The prop <TagDocs text='textConfirmBtn' /> is used to define the text of the confirmation button in the dialog box
 
 <Playground>
  <ConfirmDialogCustom textConfirmBtn='Example Confirm' />
@@ -180,7 +180,7 @@ The prop <Tag text='textConfirmBtn' /> is used to define the text of the confirm
 
 ##### <span name="floating-nav">On Cancel and Text Cancel Btn</span>
 
-The props <Tag text='onCancel and textCancelBtn' /> they are used to cancel the confirmDialog, onCancel should carry the function that closes it and textCancelBtn the text that you want it to carry
+The props <TagDocs text='onCancel and textCancelBtn' /> they are used to cancel the confirmDialog, onCancel should carry the function that closes it and textCancelBtn the text that you want it to carry
 
 Note that it is recommended that the textCancelBtn and handleCancel props be defined together, as defining only textCancelBtn would not make much sense
 
@@ -208,7 +208,7 @@ Note that it is recommended that the textCancelBtn and handleCancel props be def
 
 ##### <span name="floating-nav">Width</span>
 
-The prop <Tag text='width' /> is used to set the custom width of the confirmation dialog to
+The prop <TagDocs text='width' /> is used to set the custom width of the confirmation dialog to
 
 
 <Playground>
diff --git a/docs/components/date-picker.mdx b/docs/components/date-picker.mdx
index 039a5a5..4cab388 100644
--- a/docs/components/date-picker.mdx
+++ b/docs/components/date-picker.mdx
@@ -39,7 +39,7 @@ The code snippet below shows how to use the DatePicker component:
 
 ##### <span name="floating-nav">Language</span>
 
-With the prop <Tag text='language' />, its variants <Tag text='es' /> and <Tag text='en' /> you can control the language
+With the prop <TagDocs text='language' />, its variants <TagDocs text='es' /> and <TagDocs text='en' /> you can control the language
 
 <Playground>
 
@@ -61,7 +61,7 @@ With the prop <Tag text='language' />, its variants <Tag text='es' /> and <Tag t
 
 ##### <span name="floating-nav">Format</span>
 
-With the prop <Tag text='format' />, and its <Tag text='short' /> and <Tag text='long' /> variants, you can customize the display format of the date, either in its full or abbreviated form.
+With the prop <TagDocs text='format' />, and its <TagDocs text='short' /> and <TagDocs text='long' /> variants, you can customize the display format of the date, either in its full or abbreviated form.
 
 <Playground>
 <Flex justifyContent='around'>
@@ -82,7 +82,7 @@ With the prop <Tag text='format' />, and its <Tag text='short' /> and <Tag text=
 
 ##### <span name="floating-nav">OnlyOf</span>
 
-With the prop <Tag text='onlyOf' />, its variants <Tag text='year' />, <Tag text='month' />, <Tag text='day' /> and <Tag text='month' /> you can control the format
+With the prop <TagDocs text='onlyOf' />, its variants <TagDocs text='year' />, <TagDocs text='month' />, <TagDocs text='day' /> and <TagDocs text='month' /> you can control the format
 
 <Playground>
 
@@ -108,7 +108,7 @@ With the prop <Tag text='onlyOf' />, its variants <Tag text='year' />, <Tag text
 
 ##### <span name="floating-nav">MinDate</span>
 
-With the prop <Tag text='minDate' />, you can define the selectable minimum date
+With the prop <TagDocs text='minDate' />, you can define the selectable minimum date
 
 <Playground>
 
@@ -125,7 +125,7 @@ With the prop <Tag text='minDate' />, you can define the selectable minimum date
 
 ##### <span name="floating-nav">MaxDate</span>
 
-With the prop <Tag text='maxDate' />, you can define the maximum selectable date
+With the prop <TagDocs text='maxDate' />, you can define the maximum selectable date
 
 <Playground>
 
diff --git a/docs/components/dynamic-hero-icon.mdx b/docs/components/dynamic-hero-icon.mdx
index acbe7fd..e029f50 100644
--- a/docs/components/dynamic-hero-icon.mdx
+++ b/docs/components/dynamic-hero-icon.mdx
@@ -38,7 +38,7 @@ The code snippet below shows how to use the DynamicHeroIcon component:
 
 ##### <span name="floating-nav">Icon</span>
 
-With the prop <Tag text='Icon' />, you can choose the required icon in a fast and simple way
+With the prop <TagDocs text='Icon' />, you can choose the required icon in a fast and simple way
 
 <Playground className="gap-y-2">
        <DynamicHeroIcon icon="BellIcon" width={30} className="text-blue-700" />
@@ -53,7 +53,7 @@ With the prop <Tag text='Icon' />, you can choose the required icon in a fast an
 
 ##### <span name="floating-nav">Width</span>
 
-With the prop <Tag text='width' />, you can choose the size of the chosen icon
+With the prop <TagDocs text='width' />, you can choose the size of the chosen icon
 
 <Playground className="gap-y-2">
        <DynamicHeroIcon icon="BellIcon" width={50} className="text-blue-700" />
@@ -68,7 +68,7 @@ With the prop <Tag text='width' />, you can choose the size of the chosen icon
 
 ##### <span name="floating-nav">ClassName</span>
 
-With the prop <Tag text='className' />, you can choose the color of the chosen icon, among many other things
+With the prop <TagDocs text='className' />, you can choose the color of the chosen icon, among many other things
 
 <Playground className="gap-y-2">
        <DynamicHeroIcon icon="CheckCircleIcon" width={30} className="text-green-400" />
@@ -97,7 +97,7 @@ With the prop <Tag text='className' />, you can choose the color of the chosen i
 
 />
 
-You can import IconName like this <Tag text='import {IconName} from "dd360-ds/DynamicHeroIcon"' />
+You can import IconName like this <TagDocs text='import {IconName} from "dd360-ds/DynamicHeroIcon"' />
 
 
 <AlertReactKnowledge />
diff --git a/docs/components/filter-range-slider.mdx b/docs/components/filter-range-slider.mdx
index a81ca8c..05bdf3a 100644
--- a/docs/components/filter-range-slider.mdx
+++ b/docs/components/filter-range-slider.mdx
@@ -137,29 +137,29 @@ we can avoid any issues with the FilterRangeSlider component not being fully ini
 
 ##### <span name="floating-nav">Min & max</span>
 
-<Tag text='min' />
+<TagDocs text='min' />
 Represents the minimum value that can be selected in the 
 range slider. It defaults to 0.
 
-<Tag text='max' />
+<TagDocs text='max' />
 Represents the maximum value that can be selected in the 
 range slider. It defaults to 999999999.
 
-<Tag text='initMinValue' />
+<TagDocs text='initMinValue' />
 Represents the initial minimum value that will be set 
 in the range slider. If it's not provided, then it will default to the min prop.
 
-<Tag text='initMaxValue' />
+<TagDocs text='initMaxValue' />
 Represents the initial maximum value that will be set 
 in the range slider. If it's not provided, then it will default to the max prop.
 
-<Tag text='minValDisabled' />
+<TagDocs text='minValDisabled' />
 Is a boolean value that determines whether the minimum 
 value input field will be disabled or not. If it's set to true, the minimum 
 input field will be disabled and the user will not be able to change its value. 
 It defaults to false.
 
-<Tag text='maxValDisabled' />
+<TagDocs text='maxValDisabled' />
 Is a boolean value that determines whether the maximum 
 value input field will be disabled or not. If it's set to true, the maximum input 
 field will be disabled and the user will not be able to change its value. It 
diff --git a/docs/components/filter-select-multi.mdx b/docs/components/filter-select-multi.mdx
index cdd8924..bab1f96 100644
--- a/docs/components/filter-select-multi.mdx
+++ b/docs/components/filter-select-multi.mdx
@@ -57,7 +57,7 @@ The code snippet below shows how to use the FilterSelectMulti component:
 
 ##### <span name="floating-nav">Initial Item List</span>
 
-The prop <Tag text='initialItemList' /> it is used to show the available options, there is also the possibility of disabling one of them
+The prop <TagDocs text='initialItemList' /> it is used to show the available options, there is also the possibility of disabling one of them
 <Playground className="gap-y-2">
  <FilterSelectCustom disabled isMulti />
 </Playground>
@@ -165,7 +165,7 @@ Note: The "domLoaded" state variable in the FilterSelectMultiCustom is used to e
 
 ##### <span name="floating-nav">Title</span>
 
-The prop <Tag text='title' /> serves to provide a descriptive title or label
+The prop <TagDocs text='title' /> serves to provide a descriptive title or label
 
 <Playground className="gap-y-2">
  <FilterSelectCustom isMulti title="Title Example" />
@@ -201,7 +201,7 @@ The prop <Tag text='title' /> serves to provide a descriptive title or label
 
 ##### <span name="floating-nav">Text Apply Btn</span>
 
-The prop <Tag text='textApplyBtn' /> it is used to customize the text of the apply button
+The prop <TagDocs text='textApplyBtn' /> it is used to customize the text of the apply button
 
 <Playground className="gap-y-2">
  <FilterSelectCustom isMulti textApplyBtn="Apply Example"/>
@@ -235,7 +235,7 @@ The prop <Tag text='textApplyBtn' /> it is used to customize the text of the app
 
 ##### <span name="floating-nav">Text Reset Btn</span>
 
-The prop <Tag text='textResetBtn' /> it is used to customize the text of the reset button
+The prop <TagDocs text='textResetBtn' /> it is used to customize the text of the reset button
 
 <Playground className="gap-y-2">
  <FilterSelectCustom isMulti textResetBtn="Reset Example"/>
@@ -269,7 +269,7 @@ The prop <Tag text='textResetBtn' /> it is used to customize the text of the res
 
 ##### <span name="floating-nav">Width</span>
 
-The prop <Tag text='width' /> used to customize the size
+The prop <TagDocs text='width' /> used to customize the size
 
 <Playground className="gap-y-2">
  <FilterSelectCustom isMulti width={250}/>
diff --git a/docs/components/filter-select.mdx b/docs/components/filter-select.mdx
index 0a829dc..756a4bb 100644
--- a/docs/components/filter-select.mdx
+++ b/docs/components/filter-select.mdx
@@ -57,7 +57,7 @@ The code snippet below shows how to use the FilterSelect component:
 
 ##### <span name="floating-nav">List Items</span>
 
-The prop <Tag text='listItems' /> it is used to show the available options, there is also the possibility of disabling one of them
+The prop <TagDocs text='listItems' /> it is used to show the available options, there is also the possibility of disabling one of them
 <Playground className="gap-y-2">
  <FilterSelectCustom disabled />
 </Playground>
@@ -165,7 +165,7 @@ Note: The "domLoaded" state variable in the FilterSelectCustom is used to ensure
 
 ##### <span name="floating-nav">Title</span>
 
-The prop <Tag text='title' /> serves to provide a descriptive title or label
+The prop <TagDocs text='title' /> serves to provide a descriptive title or label
 
 <Playground className="gap-y-2">
  <FilterSelectCustom title="Title Example" />
@@ -199,7 +199,7 @@ The prop <Tag text='title' /> serves to provide a descriptive title or label
 
 ##### <span name="floating-nav">Selected Value</span>
 
-The prop <Tag text='selectedValue' /> is used to provide a default value
+The prop <TagDocs text='selectedValue' /> is used to provide a default value
 
 <Playground className="gap-y-2">
  <FilterSelectCustom selectedValue="A"/>
@@ -233,7 +233,7 @@ The prop <Tag text='selectedValue' /> is used to provide a default value
 
 ##### <span name="floating-nav">Text Apply Btn</span>
 
-The prop <Tag text='textApplyBtn' /> it is used to customize the text of the apply button
+The prop <TagDocs text='textApplyBtn' /> it is used to customize the text of the apply button
 
 <Playground className="gap-y-2">
  <FilterSelectCustom textApplyBtn="Apply Example"/>
@@ -267,7 +267,7 @@ The prop <Tag text='textApplyBtn' /> it is used to customize the text of the app
 
 ##### <span name="floating-nav">Text Reset Btn</span>
 
-The prop <Tag text='textResetBtn' /> it is used to customize the text of the reset button
+The prop <TagDocs text='textResetBtn' /> it is used to customize the text of the reset button
 
 <Playground className="gap-y-2">
  <FilterSelectCustom textResetBtn="Reset Example"/>
@@ -301,7 +301,7 @@ The prop <Tag text='textResetBtn' /> it is used to customize the text of the res
 
 ##### <span name="floating-nav">Width</span>
 
-The prop <Tag text='width' /> used to customize the size
+The prop <TagDocs text='width' /> used to customize the size
 
 <Playground className="gap-y-2">
  <FilterSelectCustom width={250}/>
diff --git a/docs/components/skeleton.mdx b/docs/components/skeleton.mdx
index 9a4f09a..583276a 100644
--- a/docs/components/skeleton.mdx
+++ b/docs/components/skeleton.mdx
@@ -42,7 +42,7 @@ The code snippet below shows how to use the Skeleton component:
 
 ##### <span name="floating-nav">Animation</span>
 
-With the prop <Tag text='animation' /> you can control the animation of Skeleton
+With the prop <TagDocs text='animation' /> you can control the animation of Skeleton
 
 <Playground>
   <Flex gap="4">
@@ -64,7 +64,7 @@ With the prop <Tag text='animation' /> you can control the animation of Skeleton
 
 ##### <span name="floating-nav">Rounded</span>
 
-With the prop <Tag text='rounded' /> you can customize the rounded edge of the skeleton
+With the prop <TagDocs text='rounded' /> you can customize the rounded edge of the skeleton
 
 <Playground>
   <Flex gap="4">
@@ -98,7 +98,7 @@ With the prop <Tag text='rounded' /> you can customize the rounded edge of the s
 
 ##### <span name="floating-nav">Color</span>
 
-With the prop <Tag text='color' /> you can customize the color of the skeleton
+With the prop <TagDocs text='color' /> you can customize the color of the skeleton
 
 <Playground>
   <Skeleton color="#74a9e6" width={200} height={30} rounded="2xl" />
@@ -112,7 +112,7 @@ With the prop <Tag text='color' /> you can customize the color of the skeleton
 
 ##### <span name="floating-nav">Table Content Skeleton</span>
 
-With the component <Tag text=' TableContentSkeleton' /> you can display a skeleton table content with mock rows and columns to represent data in a
+With the component <TagDocs text=' TableContentSkeleton' /> you can display a skeleton table content with mock rows and columns to represent data in a
 tabular structure.
 
 <Playground>
diff --git a/docs/components/table.mdx b/docs/components/table.mdx
index 9618fee..3c805f3 100644
--- a/docs/components/table.mdx
+++ b/docs/components/table.mdx
@@ -92,7 +92,7 @@ The code snippet below shows how to use the Table component:
 
 ##### <span name="floating-nav">StickyTop</span>
 
-With the prop <Tag text='stickyTop' /> you can fix the header with a sticky position at the top
+With the prop <TagDocs text='stickyTop' /> you can fix the header with a sticky position at the top
 
 <Playground className="gap-y-2">
    <Table className="h-24 w-96">
@@ -161,7 +161,7 @@ With the prop <Tag text='stickyTop' /> you can fix the header with a sticky posi
 
 ##### <span name="floating-nav">StickyLeft</span>
 
-With the prop <Tag text='stickyLeft' /> you can fix the header with a sticky position at the left
+With the prop <TagDocs text='stickyLeft' /> you can fix the header with a sticky position at the left
 
 <Playground className="gap-y-2">
    <Table className="w-52">
@@ -230,7 +230,7 @@ With the prop <Tag text='stickyLeft' /> you can fix the header with a sticky pos
 
 ##### <span name="floating-nav">ColSpan</span>
 
-With the prop <Tag text='colSpan' /> you can set the number of columns that the cell will occupy
+With the prop <TagDocs text='colSpan' /> you can set the number of columns that the cell will occupy
 
 <Playground className="gap-y-2">
    <Table className="w-52">
@@ -295,7 +295,7 @@ With the prop <Tag text='colSpan' /> you can set the number of columns that the
 
 ##### <span name="floating-nav">RowSpan</span>
 
-With the prop <Tag text='rowSpan' /> you can set the number of rows that the cell will occupy
+With the prop <TagDocs text='rowSpan' /> you can set the number of rows that the cell will occupy
 
 <Playground className="gap-y-2">
    <Table className="w-96">
@@ -351,7 +351,7 @@ With the prop <Tag text='rowSpan' /> you can set the number of rows that the cel
 <br />
 ##### <span name="floating-nav">Accordion</span>
 
-You can use <Tag text='Table.Accordion' /> for dropdown rows
+You can use <TagDocs text='Table.Accordion' /> for dropdown rows
 
 <Playground className="gap-y-2">
     <Table className="w-96">
diff --git a/docs/components/tag.mdx b/docs/components/tag.mdx
new file mode 100644
index 0000000..0cbd7e4
--- /dev/null
+++ b/docs/components/tag.mdx
@@ -0,0 +1,231 @@
+---
+product: dd360-ds
+title: React Tag component
+components: Tag
+---
+
+<br id='top' />
+<br />
+
+<Label>Components</Label>
+
+# <HeaderDocCustom title="Tag" pathUrl="components-tag--tag" />
+
+The Tag component serves to provide a visual and semantic way to label, categorize, or mark elements within a user interface. These tags are useful for organizing and highlighting specific information, allowing users to quickly identify the nature or purpose of an item.
+
+<br />
+<br />
+##### <span name="floating-nav">Imports</span>
+
+The first alternative is recommended since they can reduce the application bundle
+
+<WindowEditor codeString="import Tag from 'dd360-ds/Tag'" />
+<WindowEditor codeString="import { Tag } from 'dd360-ds'" />
+
+<br />
+##### <span name="floating-nav">Usage</span>
+
+Use the Tag component as shown below:
+
+<Playground className="gap-y-2">
+    <Tag text="Label tag" className="primary-tag-class" />
+</Playground>
+
+The code snippet below shows how to use the Tag component:
+
+<WindowEditor
+    codeString={`import { Tag } from 'dd360-ds'
+  
+<Tag text="Label tag" />`}
+/>
+
+<br />
+
+##### <span name="floating-nav">Variant</span>
+
+With the prop <TagDocs text='variant' /> you can customize the color of the Tag
+
+<Playground className="gap-y-2">
+    <Flex className="flex" gap="4">
+        <Tag text="Primary!" variant="primary"  className="primary-tag-class" />
+        <Tag text="Success!" variant="success" className="success-tag-class" />
+        <Tag text="Secondary!" variant="secondary" className="secondary-tag-class" />
+        <Tag text="Warning!" variant="warning" className="warning-tag-class" />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Tag } from 'dd360-ds'
+
+export default function App() {
+    return (
+        <Flex gap="4">
+            <Tag text="Primary!" variant="primary" />
+            <Tag text="Success!" variant="success" />
+            <Tag text="Secondary!" variant="secondary" />
+            <Tag text="Warning!" variant="warning" />
+        </Flex>
+    )
+}`} />
+
+<br />
+
+##### <span name="floating-nav">Font size</span>
+
+With the prop <TagDocs text='fontSize' /> you can customize the size of the icon and the text on the Tag
+
+<Playground className="gap-y-2">
+    <Flex alignItems="center" gap="4">
+        <Tag text="Primary!" variant="primary" fontSize="small" className="primary-tag-class" />
+        <Tag text="Success!" variant="success" fontSize="medium" className="success-tag-class" />
+        <Tag text="Secondary!" variant="secondary" fontSize="large" className="secondary-tag-class" />
+        <Tag text="Warning!" variant="warning" fontSize="extraLarge" className="warning-tag-class" />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Tag } from 'dd360-ds'
+
+export default function App() {
+    return (
+        <Flex alignItems="center" gap="4">
+            <Tag text="Primary!" variant="primary" fontSize="small" />
+            <Tag text="Success!" variant="success" fontSize="medium" />
+            <Tag text="Secondary!" variant="secondary" fontSize="large" />
+            <Tag text="Warning!" variant="warning" fontSize="extraLarge" />
+        </Flex>
+    )
+}`} />
+
+<br />
+
+##### <span name="floating-nav">Fill</span>
+
+With the prop <TagDocs text='fill' /> enables the fill of the tag according to the value of the variant prop
+
+<Playground className="gap-y-2">
+    <Flex alignItems="center" gap="4">
+        <Tag text="Primary!" variant="primary" fill={true} className="primary-filled-tag-class" />
+        <Tag text="Success!" variant="success" fill={true} className="success-filled-tag-class" />
+        <Tag text="Secondary!" variant="secondary" fill={true} className="secondary-filled-tag-class" />
+        <Tag text="Warning!" variant="warning" fill={true} className="warning-filled-tag-class" />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Tag } from 'dd360-ds'
+
+export default function App() {
+    return (
+        <Flex alignItems="center" gap="4">
+            <Tag text="Primary!" variant="primary" fill={true} />
+            <Tag text="Success!" variant="success" fill={true} />
+            <Tag text="Secondary!" variant="secondary" fill={true} />
+            <Tag text="Warning!" variant="warning" fill={true} />
+        </Flex>
+    )
+}`} />
+
+<br />
+
+##### <span name="floating-nav">Rounded</span>
+
+With the prop <TagDocs text='rounded' /> you can customize the border radius in the tag
+
+<Playground className="gap-y-2">
+    <Flex alignItems="center" gap="4">
+        <Tag text="None!" variant="primary" fill={true} rounded="none" className="primary-filled-tag-class" />
+        <Tag text="Medium!" variant="success" fill={true} rounded="md" className="success-filled-tag-class" />
+        <Tag text="Large!" variant="secondary" fill={true} rounded="lg" className="secondary-filled-tag-class" />
+        <Tag text="Tag full!" variant="warning" fill={true} rounded="full" className="warning-filled-tag-class" />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Tag } from 'dd360-ds'
+
+export default function App() {
+    return (
+        <Flex alignItems="center" gap="4">
+            <Tag text="None!" variant="primary" fill={true} rounded="none" />
+            <Tag text="Medium!" variant="success" fill={true} rounded="md" />
+            <Tag text="Large!" variant="secondary" fill={true} rounded="lg" />
+            <Tag text="Tag full!" variant="warning" fill={true} rounded="full" />
+        </Flex>
+    )
+}`} />
+
+<br />
+
+##### <span name="floating-nav">Icon</span>
+
+With the prop <TagDocs text='icon' /> you can render a custom icon in the Tag before the text, is a optional
+prop
+
+<Playground className="gap-y-2">
+    <Flex gap="4">
+        <TagCustom text="Primary" icon="info" variant="primary" className="primary-tag-class" />
+        <TagCustom text="Warning" icon="warn" variant="warning" className="warning-tag-class" />
+        <TagCustom text="Success" icon="check" variant="success" className="success-tag-class" />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Tag } from 'dd360-ds'
+import {  InformationCircleIcon } from '@heroicons/react/solid'
+
+export default function App() {
+    return (
+        <Flex gap="4">
+            <Tag text="Primary" icon={InformationCircleIcon} variant="primary" />
+            <Tag text="Warning" icon={InformationCircleIcon} variant="warning" />
+            <Tag text="Success" icon={CheckCircleIcon} variant="success" />
+        </Flex>
+    )
+}`} />
+
+<br />
+
+##### <span name="floating-nav">Text</span>
+
+With the props <TagDocs text='text' /> you can provide a text to the Tag and this prop is the only required
+of the component
+
+<Playground className="gap-y-2">
+    <Flex gap="4">
+        <Tag text="Label tag!" variant="success" className="success-tag-class"/>
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Flex, Tag } from 'dd360-ds'
+
+export default function App() {
+    return (
+        <Flex gap="4">
+            <Tag text="Label tag!" variant="success" />
+        </Flex>
+    )
+}`} />
+
+<br />
+<br />
+##### <span name="floating-nav">API Reference</span>
+
+<CustomTableDocs
+    dataTable={[
+        { title: 'text', types: ['string'], required: true },
+        { title: 'icon', types: ['React.ElementType'] },
+        { title: 'variant', default: 'primary', types: ['primary', 'warning', 'secondary', 'success'] },
+        { title: 'fontSize', default: 'medium', types: ['small', 'large', 'medium', 'extraLarge'] },
+        { title: 'rounded', default: 'md', types: ['base', 'none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full'] },
+        { title: 'fill', default: 'false', types: ['boolean'] },
+        { title: 'className', default: '-', types: ['string'] },
+        { title: 'classNameIcon', default: '-', types: ['string'] }
+    ]}
+
+/>
+
+<AlertReactKnowledge />
+
+<BackAndForwardController />
\ No newline at end of file
diff --git a/docs/components/transition.mdx b/docs/components/transition.mdx
index 2b8f443..9e47a3b 100644
--- a/docs/components/transition.mdx
+++ b/docs/components/transition.mdx
@@ -48,21 +48,21 @@ Within your component's render method, place the Transition component, wrapping
 
 The Transition component accepts the following props:
 
-<Tag text='show' /> determines whether the transition is visible or hidden. Set it to true to show the transition or false to hide it.
+<TagDocs text='show' /> determines whether the transition is visible or hidden. Set it to true to show the transition or false to hide it.
 <br />
-<Tag text='animationStart' /> specifies the starting animation type. It defaults to 'fadeIn'.
+<TagDocs text='animationStart' /> specifies the starting animation type. It defaults to 'fadeIn'.
 <br />
-<Tag text='animationEnd' /> specifies the ending animation type. It defaults to 'fadeOut'.
+<TagDocs text='animationEnd' /> specifies the ending animation type. It defaults to 'fadeOut'.
 <br />
-<Tag text='duration' /> determines the duration of the animation in milliseconds. The default duration is set to 300 milliseconds.
+<TagDocs text='duration' /> determines the duration of the animation in milliseconds. The default duration is set to 300 milliseconds.
 <br />
-<Tag text='delay' /> specifies the delay before the animation starts in milliseconds. It defaults to 0 milliseconds.
+<TagDocs text='delay' /> specifies the delay before the animation starts in milliseconds. It defaults to 0 milliseconds.
 <br />
-<Tag text='fillMode' /> determines how the animation styles are applied before and after the animation. It accepts the values 'none', 'forwards', 'backwards', or 'both'. The default value is 'both'.
+<TagDocs text='fillMode' /> determines how the animation styles are applied before and after the animation. It accepts the values 'none', 'forwards', 'backwards', or 'both'. The default value is 'both'.
 <br />
-<Tag text='timingFunction' /> defines the timing function for the animation. It accepts the values 'linear', 'ease', 'ease-in', 'ease-out', or 'ease-in-out'. The default is set to 'linear'.
+<TagDocs text='timingFunction' /> defines the timing function for the animation. It accepts the values 'linear', 'ease', 'ease-in', 'ease-out', or 'ease-in-out'. The default is set to 'linear'.
 <br />
-<Tag text='alwaysRender' /> controls whether the transition should always render its child elements, even when not visible. By default, it is set to false.
+<TagDocs text='alwaysRender' /> controls whether the transition should always render its child elements, even when not visible. By default, it is set to false.
 <br />
 
 <br />
diff --git a/docs/controls/progress-circle.mdx b/docs/controls/progress-circle.mdx
index f2b1f27..bc6d12a 100644
--- a/docs/controls/progress-circle.mdx
+++ b/docs/controls/progress-circle.mdx
@@ -45,7 +45,7 @@ The code snippet below shows how to use the ProgressCircle component:
 
 ##### <span name="floating-nav">ColorComplete</span>
 
-With the prop <Tag text='colorComplete'/> you can customize the color when the progress is complete
+With the prop <TagDocs text='colorComplete'/> you can customize the color when the progress is complete
 
 <Playground className="gap-y-2">
     <ProgressCircle
@@ -66,7 +66,7 @@ With the prop <Tag text='colorComplete'/> you can customize the color when the p
 <br />
 ##### <span name="floating-nav">ColorProgress</span>
 
-With the prop <Tag text='colorProgress'/> you can customize the progress color
+With the prop <TagDocs text='colorProgress'/> you can customize the progress color
 
 <Playground className="gap-y-2">
     <ProgressCircle
@@ -95,7 +95,7 @@ With the prop <Tag text='colorProgress'/> you can customize the progress color
 <br />
 ##### <span name="floating-nav">ColorBackground</span>
 
-With the prop <Tag text='colorBackground'/> you can customize the color of the progress that is not complete
+With the prop <TagDocs text='colorBackground'/> you can customize the color of the progress that is not complete
 
 <Playground className="gap-y-2">
     <ProgressCircle
@@ -122,7 +122,7 @@ With the prop <Tag text='colorBackground'/> you can customize the color of the p
 <br />
 ##### <span name="floating-nav">StrokeWidth</span>
 
-With the prop <Tag text='strokeWidth'/> you can customize the thickness of the progress
+With the prop <TagDocs text='strokeWidth'/> you can customize the thickness of the progress
 
 <Playground className="gap-y-2">
     <ProgressCircle value={50} width={90} strokeWidth={5} classNamePercentage="w-full text-center text-sm" children={<Text variant="small">Complete</Text>} />
diff --git a/docs/controls/progressbar.mdx b/docs/controls/progressbar.mdx
index 672b65a..735c9ef 100644
--- a/docs/controls/progressbar.mdx
+++ b/docs/controls/progressbar.mdx
@@ -48,7 +48,7 @@ The code snippet below shows how to use the Progressbar component:
 
 ##### <span name="floating-nav">BackgroundColor</span>
 
-With the prop <Tag text='backgroundColor' /> you can customize the color of the bar
+With the prop <TagDocs text='backgroundColor' /> you can customize the color of the bar
 
 <Playground className="gap-y-2">
     <ProgressBar backgroundColor="#93e78e" value={40} height="10px" />
@@ -63,7 +63,7 @@ With the prop <Tag text='backgroundColor' /> you can customize the color of the
 <br />
 ##### <span name="floating-nav">Label</span>
 
-With the prop <Tag text='label' /> you can add a text bar
+With the prop <TagDocs text='label' /> you can add a text bar
 
 <Playground className="gap-y-2">
     <ProgressBar label="Loading..." value={60} height="20px" />
@@ -80,7 +80,7 @@ With the prop <Tag text='label' /> you can add a text bar
 <br />
 ##### <span name="floating-nav">Animated</span>
 
-With the prop <Tag text='animated' /> you can add an animation to the bar
+With the prop <TagDocs text='animated' /> you can add an animation to the bar
 
 <Playground className="gap-y-2">
     <ProgressBar animated value={80} height="10px" />
@@ -95,7 +95,7 @@ With the prop <Tag text='animated' /> you can add an animation to the bar
 <br />
 ##### <span name="floating-nav">BgColorContainer</span>
 
-With the prop <Tag text='animated' /> you can modify the color of the container of the bar
+With the prop <TagDocs text='animated' /> you can modify the color of the container of the bar
 
 <Playground className="gap-y-2">
     <ProgressBar backgroundColor="#ff4e4e" bgColorContainer="#fff" value={50} height="10px" />
diff --git a/docs/controls/spinner.mdx b/docs/controls/spinner.mdx
index 842ec5b..297be07 100644
--- a/docs/controls/spinner.mdx
+++ b/docs/controls/spinner.mdx
@@ -47,7 +47,7 @@ The code snippet below shows how to use the Spinner component:
 
 ##### <span name="floating-nav">Color</span>
 
-With the prop <Tag text='color' /> you can customize the color of the spinner
+With the prop <TagDocs text='color' /> you can customize the color of the spinner
 
 <Playground className="gap-y-2">
     <Spinner color="#44ce41" />
@@ -65,7 +65,7 @@ With the prop <Tag text='color' /> you can customize the color of the spinner
 
 ##### <span name="floating-nav">Border</span>
 
-With the prop <Tag text='border' /> you can customize the width of the spinner border
+With the prop <TagDocs text='border' /> you can customize the width of the spinner border
 
 <Playground className="gap-y-2">
     <Spinner border={8} />
@@ -83,7 +83,7 @@ With the prop <Tag text='border' /> you can customize the width of the spinner b
 
 ##### <span name="floating-nav">PageLoader</span>
 
-With the prop <Tag text='pageLoader' /> you can add a proper spineer for page load
+With the prop <TagDocs text='pageLoader' /> you can add a proper spineer for page load
 
 <Playground className="gap-y-2">
     <Spinner pageLoader />
@@ -101,7 +101,7 @@ With the prop <Tag text='pageLoader' /> you can add a proper spineer for page lo
 
 ##### <span name="floating-nav">Width and Height</span>
 
-With the props <Tag text='width' /> and <Tag text='height' />
+With the props <TagDocs text='width' /> and <TagDocs text='height' />
 you can customize the size of the spinner
 
 <Playground className="gap-y-2">
diff --git a/docs/controls/stepper.mdx b/docs/controls/stepper.mdx
index d80983a..d8f09da 100644
--- a/docs/controls/stepper.mdx
+++ b/docs/controls/stepper.mdx
@@ -49,7 +49,7 @@ The code snippet below shows how to use the Stepper component:
 
 ##### <span name="floating-nav">FontSize</span>
 
-With the prop <Tag text='fontSize' /> you can customize the size of the text
+With the prop <TagDocs text='fontSize' /> you can customize the size of the text
 
 <Playground className="gap-y-2">
     <Stepper phase={1} totalPhases={4} width="5rem" fontSize="2rem" />
@@ -67,7 +67,7 @@ With the prop <Tag text='fontSize' /> you can customize the size of the text
 
 ##### <span name="floating-nav">TextColor</span>
 
-With the prop <Tag text='textColor' /> you can customize the color of the text
+With the prop <TagDocs text='textColor' /> you can customize the color of the text
 
 <Playground className="gap-y-2">
     <Stepper phase={1} totalPhases={4} width="5rem" textColor="#d62c2c" />
@@ -85,7 +85,7 @@ With the prop <Tag text='textColor' /> you can customize the color of the text
 
 ##### <span name="floating-nav">StrokeWidth</span>
 
-With the prop <Tag text='strokeWidth' /> you can customize the thickness of the stepper
+With the prop <TagDocs text='strokeWidth' /> you can customize the thickness of the stepper
 
 <Playground className="gap-y-2">
     <Stepper phase={1} totalPhases={4} width="5rem" strokeWidth={15} />
@@ -103,7 +103,7 @@ With the prop <Tag text='strokeWidth' /> you can customize the thickness of the
 
 ##### <span name="floating-nav">StrokeColor</span>
 
-With the prop <Tag text='strokeColor' /> you can customize the color of the stepper
+With the prop <TagDocs text='strokeColor' /> you can customize the color of the stepper
 
 <Playground className="gap-y-2">
     <Stepper phase={1} totalPhases={4} width="5rem" strokeColor="#2ac948" />
@@ -121,7 +121,7 @@ With the prop <Tag text='strokeColor' /> you can customize the color of the step
 
 ##### <span name="floating-nav">Text</span>
 
-With the prop <Tag text='text' /> you can add a custom text in case you don't need to show the steps
+With the prop <TagDocs text='text' /> you can add a custom text in case you don't need to show the steps
 
 <Playground className="gap-y-2">
     <Stepper phase={1} totalPhases={4} width="5rem" text="25%" />
diff --git a/docs/controls/switch.mdx b/docs/controls/switch.mdx
index b9743e3..6b048bf 100644
--- a/docs/controls/switch.mdx
+++ b/docs/controls/switch.mdx
@@ -48,7 +48,7 @@ The code snippet below shows how to use the Switch component:
 
 ##### <span name="floating-nav">Text</span>
 
-With the prop <Tag text='text' /> you can add text next to the switch
+With the prop <TagDocs text='text' /> you can add text next to the switch
 
 <Playground className="gap-y-2">
     <SwitchCustom text="Active option" />
@@ -66,7 +66,7 @@ With the prop <Tag text='text' /> you can add text next to the switch
 
 ##### <span name="floating-nav">CustomIcon</span>
 
-With the prop <Tag text='customIcon' /> you can add icon on switch disabled
+With the prop <TagDocs text='customIcon' /> you can add icon on switch disabled
 
 <Playground className="gap-y-2">
     <SwitchCustom customIcon={<DynamicHeroIcon icon="XIcon" className="text-blue-700 w-5" />} />
diff --git a/docs/form/input.mdx b/docs/form/input.mdx
index 5cea1ea..944011d 100644
--- a/docs/form/input.mdx
+++ b/docs/form/input.mdx
@@ -159,7 +159,7 @@ import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
 
 ##### <span name="floating-nav">isRequired</span>
 
-With the prop <Tag text='isRequired' /> you can mark an input as required. Setting isRequired to true will add an asterisk (*) next to the entry to indicate that its completion is required. This functionality is especially useful for highlighting the need to fill in certain fields on forms or user interfaces.
+With the prop <TagDocs text='isRequired' /> you can mark an input as required. Setting isRequired to true will add an asterisk (*) next to the entry to indicate that its completion is required. This functionality is especially useful for highlighting the need to fill in certain fields on forms or user interfaces.
 
 <Playground className="gap-y-2">
     <Input isRequired label='This field is required' />
@@ -198,7 +198,7 @@ With the prop <Tag text='isRequired' /> you can mark an input as required. Setti
 
 ##### <span name="floating-nav">Currency</span>
 
-When the <Tag text='type' /> prop is <Tag text='currency'/>.
+When the <TagDocs text='type' /> prop is <TagDocs text='currency'/>.
 
 <CustomTableDocs
     dataTable={[
diff --git a/docs/form/select.mdx b/docs/form/select.mdx
index fa4674f..5d8157f 100644
--- a/docs/form/select.mdx
+++ b/docs/form/select.mdx
@@ -122,7 +122,7 @@ import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
 
 ##### <span name="floating-nav">isRequired</span>
 
-With the prop <Tag text='isRequired' /> you can mark an select as required. Setting isRequired to true will add an asterisk (*) next to the entry to indicate that its completion is required. This functionality is especially useful for highlighting the need to fill in certain fields on forms or user interfaces.
+With the prop <TagDocs text='isRequired' /> you can mark an select as required. Setting isRequired to true will add an asterisk (*) next to the entry to indicate that its completion is required. This functionality is especially useful for highlighting the need to fill in certain fields on forms or user interfaces.
 
 <Playground className="gap-y-2">
     <Select optionsList={{ A: {label: 'First Option'} }} isRequired label='This field is required' />
diff --git a/docs/form/textarea.mdx b/docs/form/textarea.mdx
index 1ab21e6..e20860c 100644
--- a/docs/form/textarea.mdx
+++ b/docs/form/textarea.mdx
@@ -96,7 +96,7 @@ import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
 
 ##### <span name="floating-nav">isRequired</span>
 
-With the prop <Tag text='isRequired' /> you can mark an textArea as required. Setting isRequired to true will add an asterisk (*) next to the entry to indicate that its completion is required. This functionality is especially useful for highlighting the need to fill in certain fields on forms or user interfaces.
+With the prop <TagDocs text='isRequired' /> you can mark an textArea as required. Setting isRequired to true will add an asterisk (*) next to the entry to indicate that its completion is required. This functionality is especially useful for highlighting the need to fill in certain fields on forms or user interfaces.
 
 <Playground className="gap-y-2">
     <TextArea isRequired label='This field is required' />
@@ -108,7 +108,7 @@ With the prop <Tag text='isRequired' /> you can mark an textArea as required. Se
 
 ##### <span name="floating-nav">classNameTextArea</span>
 
-With the prop <Tag text='classNameTextArea' /> you can customize the textArea, being able to enlarge it, shrink it and several other things according to your needs.
+With the prop <TagDocs text='classNameTextArea' /> you can customize the textArea, being able to enlarge it, shrink it and several other things according to your needs.
 
 <Playground className="gap-y-2">
     <TextArea classNameTextArea='h-48' />
diff --git a/docs/get-started/getting-started.mdx b/docs/get-started/getting-started.mdx
index 52f6421..83e87b8 100644
--- a/docs/get-started/getting-started.mdx
+++ b/docs/get-started/getting-started.mdx
@@ -36,7 +36,7 @@ ds library style sheet in your entry point, in this example we use React (App.js
 ###### <span name="floating-nav">Setup</span>
 For our library to work properly, you will need to wrap your application inside our Provider.
 
-Go to <Tag text='pages/_app.js' /> or <Tag text='pages/_app.tsx' /> (create it if it doesn't exist) and add this:
+Go to <TagDocs text='pages/_app.js' /> or <TagDocs text='pages/_app.tsx' /> (create it if it doesn't exist) and add this:
 
 ### Next.js
 
@@ -71,7 +71,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
 
 ThemeProvider provides a simple way to customize the default themes, you can change the colors and fonts.
 
-To extend or override a token in the default theme, import the <Tag text='createTheme' /> function and add the keys you want to override. You can also add new values to the theme.
+To extend or override a token in the default theme, import the <TagDocs text='createTheme' /> function and add the keys you want to override. You can also add new values to the theme.
 
 For example, if you want to update your theme colors to include your brand colors, here's what to do:
 
diff --git a/docs/layout/sidebar.mdx b/docs/layout/sidebar.mdx
index 9698046..5a8a361 100644
--- a/docs/layout/sidebar.mdx
+++ b/docs/layout/sidebar.mdx
@@ -153,7 +153,7 @@ Example:
 <br />
 ##### <span name="floating-nav">RenderBottomCmp</span>
 
-A render prop that allows you to use a fully custom element at the bottom of the SideBar. When using it alongside the <Tag text='dangerZone' /> prop, the Danger Zone will be displayed below.
+A render prop that allows you to use a fully custom element at the bottom of the SideBar. When using it alongside the <TagDocs text='dangerZone' /> prop, the Danger Zone will be displayed below.
 
 The expanded state of the SideBar is passed as an argument to the render prop, making it easy for you to adjust your component accordingly.
 
diff --git a/docs/modals/aside-modal.mdx b/docs/modals/aside-modal.mdx
index 25b22c3..029046f 100644
--- a/docs/modals/aside-modal.mdx
+++ b/docs/modals/aside-modal.mdx
@@ -47,7 +47,7 @@ The code snippet below shows how to use the AsideModal component:
 
 ##### <span name="floating-nav">TitleVariant</span>
 
-With the prop <Tag text='titleVariant' /> you can customize the size of the title
+With the prop <TagDocs text='titleVariant' /> you can customize the size of the title
 
 <Playground>
     <AsideModalCustom haveVariants={true} />
@@ -63,7 +63,7 @@ With the prop <Tag text='titleVariant' /> you can customize the size of the titl
 
 ##### <span name="floating-nav">Position</span>
 
-With the prop <Tag text='position' /> you can choose on which side of the screen to open the modal
+With the prop <TagDocs text='position' /> you can choose on which side of the screen to open the modal
 
 <br />
 ##### Position Right
@@ -95,7 +95,7 @@ With the prop <Tag text='position' /> you can choose on which side of the screen
 
 ##### <span name="floating-nav">DisableEscapeKeyDown</span>
 
-With the prop <Tag text='disableEscapeKeyDown' /> you can disable the closing of the modal with the esc key
+With the prop <TagDocs text='disableEscapeKeyDown' /> you can disable the closing of the modal with the esc key
 
 <Playground>
     <AsideModalCustom propsCustom={{ disableEscapeKeyDown: true }} />
diff --git a/docs/modals/modal.mdx b/docs/modals/modal.mdx
index f2bd53f..5d6175f 100644
--- a/docs/modals/modal.mdx
+++ b/docs/modals/modal.mdx
@@ -44,7 +44,7 @@ The code snippet below shows how to use the Modal component:
 
 ##### <span name="floating-nav">Animation</span>
 
-With the prop <Tag text='animation' /> you can add an animation when opening the modal
+With the prop <TagDocs text='animation' /> you can add an animation when opening the modal
 
 <Playground>
     <ModalCustom propsCustom={{ animation: true }} messageButtons={['Open Modal with animation', 'Open Modal whithout animation']} />
@@ -61,7 +61,7 @@ With the prop <Tag text='animation' /> you can add an animation when opening the
 <br />
 ##### <span name="floating-nav">Overlay</span>
 
-With the prop <Tag text='overlay' /> you can add a gray background to the screen
+With the prop <TagDocs text='overlay' /> you can add a gray background to the screen
 
 <Playground>
     <ModalCustom propsCustom={{ overlay: true }} messageButtons={['Open Modal with overlay', 'Open Modal without overlay']} />
@@ -79,7 +79,7 @@ With the prop <Tag text='overlay' /> you can add a gray background to the screen
 
 ##### <span name="floating-nav">FullScreen</span>
 
-With the prop <Tag text='fullScreen' /> you can make the modal take up the whole screen
+With the prop <TagDocs text='fullScreen' /> you can make the modal take up the whole screen
 
 <Playground>
     <ModalCustom propsCustom={{ fullScreen: true }} messageButtons={['Open Modal with fullScreen', 'Open Modal without fullScreen']} />
diff --git a/docs/navigation/anchor.mdx b/docs/navigation/anchor.mdx
index 59b4d05..383ec47 100644
--- a/docs/navigation/anchor.mdx
+++ b/docs/navigation/anchor.mdx
@@ -40,7 +40,7 @@ The first alternative is recommended since they can reduce the application bundl
 
 ##### <span name="floating-nav">To</span>
 
-With the prop <Tag text='to' /> you can redirect to the url you need
+With the prop <TagDocs text='to' /> you can redirect to the url you need
 
 <Playground className="flex items-center">
     <Anchor to="/docs/navigation/anchor">This is an example with the prop to</Anchor>
@@ -56,7 +56,7 @@ With the prop <Tag text='to' /> you can redirect to the url you need
 
 ##### <span name="floating-nav">As</span>
 
-With the prop <Tag text='as' /> you can add the Link of react router dom.
+With the prop <TagDocs text='as' /> you can add the Link of react router dom.
 
 <Playground className="flex items-center">
     <Anchor to="/docs/navigation/anchor">This is an example with the prop as</Anchor>
diff --git a/docs/navigation/breadcrumbs.mdx b/docs/navigation/breadcrumbs.mdx
index f951077..f9ab248 100644
--- a/docs/navigation/breadcrumbs.mdx
+++ b/docs/navigation/breadcrumbs.mdx
@@ -90,7 +90,7 @@ import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
 
 ##### <span name="floating-nav">Separator</span>
 
-With the prop <Tag text='separator' /> you can to change the default separator icon between the options
+With the prop <TagDocs text='separator' /> you can to change the default separator icon between the options
 
 <Playground className="flex items-center relative h-20">
     <Breadcrumbs options={[{ name: 'First Path' }, { name: 'Second Path' }, { name: 'Third Path' }]} separator="|" />
diff --git a/docs/navigation/cell.mdx b/docs/navigation/cell.mdx
index 419dd94..0e2f85b 100644
--- a/docs/navigation/cell.mdx
+++ b/docs/navigation/cell.mdx
@@ -37,7 +37,7 @@ unselected, and may or may not have a border. Cell has a link that can be clicke
 
 ##### <span name="floating-nav">Size</span>
 
-With the prop <Tag text='size' /> you can customize the size of the cell
+With the prop <TagDocs text='size' /> you can customize the size of the cell
 
 <Playground className="flex items-center gap-x-5">
     <Cell size="small">Cell Size Small Example</Cell>
@@ -59,7 +59,7 @@ With the prop <Tag text='size' /> you can customize the size of the cell
 
 ##### <span name="floating-nav">Icon</span>
 
-With the prop <Tag text='icon' /> you can add an icon
+With the prop <TagDocs text='icon' /> you can add an icon
 
 <Playground className="flex items-center gap-x-5">
     <Cell icon={<DynamicHeroIcon icon="CalendarIcon" />}>Cell Icon Example</Cell>
@@ -76,7 +76,7 @@ import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
 
 ##### <span name="floating-nav">Border</span>
 
-With the prop <Tag text='border' /> you can choose whether the cell has a border
+With the prop <TagDocs text='border' /> you can choose whether the cell has a border
 
 <Playground className="flex items-center gap-x-5">
     <Cell border>Cell Border Example</Cell>
@@ -92,7 +92,7 @@ With the prop <Tag text='border' /> you can choose whether the cell has a border
 
 ##### <span name="floating-nav">Disabled</span>
 
-With the prop <Tag text='disabled' /> you can disable the cell
+With the prop <TagDocs text='disabled' /> you can disable the cell
 
 <Playground className="flex items-center gap-x-5">
     <Cell disabled>Cell Disabled Example</Cell>
@@ -108,7 +108,7 @@ With the prop <Tag text='disabled' /> you can disable the cell
 
 ##### <span name="floating-nav">Selected</span>
 
-With the prop <Tag text='selected' /> a style is added to the cell to know that it was selected
+With the prop <TagDocs text='selected' /> a style is added to the cell to know that it was selected
 
 <Playground className="flex items-center gap-x-5">
     <Cell selected>Cell Selected Example</Cell>
diff --git a/docs/navigation/pagination.mdx b/docs/navigation/pagination.mdx
index dd1cbc6..1f089e2 100644
--- a/docs/navigation/pagination.mdx
+++ b/docs/navigation/pagination.mdx
@@ -24,7 +24,7 @@ The first alternative is recommended since they can reduce the application bundl
 
 ##### <span name="floating-nav">Usage</span>
 
-You can use it by importing the <Tag text='usePagination' /> hook and use it like this
+You can use it by importing the <TagDocs text='usePagination' /> hook and use it like this
 
 <Playground className="flex items-center gap-x-5">
     <PaginationCustom />
diff --git a/docs/navigation/tabs.mdx b/docs/navigation/tabs.mdx
index 525e17d..9e2c21e 100644
--- a/docs/navigation/tabs.mdx
+++ b/docs/navigation/tabs.mdx
@@ -51,7 +51,7 @@ The TabGroup component must be used to wrap the tabs.
 
 ##### <span name="floating-nav">Variant</span>
 
-With the prop <Tag text='variant' /> you can customize the style of the tabs
+With the prop <TagDocs text='variant' /> you can customize the style of the tabs
 
 <Playground className="flex items-center">
 <TabsCustom option='isVariant'/>
@@ -74,7 +74,7 @@ With the prop <Tag text='variant' /> you can customize the style of the tabs
 
 ##### <span name="floating-nav">Orientation</span>
 
-With the prop <Tag text='orientation' /> you can customize the orientation of the tabs
+With the prop <TagDocs text='orientation' /> you can customize the orientation of the tabs
 
 <Playground className="flex items-center">
  <TabsCustom option='isOrientation' />
@@ -95,7 +95,7 @@ With the prop <Tag text='orientation' /> you can customize the orientation of th
 
 ##### <span name="floating-nav">FontSize</span>
 
-With the prop <Tag text='fontSize' /> you can customize the font size of the tabs
+With the prop <TagDocs text='fontSize' /> you can customize the font size of the tabs
 
 <Playground className="flex items-center">
     <TabsCustom option="isFontSize" />
@@ -117,7 +117,7 @@ With the prop <Tag text='fontSize' /> you can customize the font size of the tab
 
 #### <span>TextColor</span>
 
-With the prop <Tag text='textColor' /> you can customize the color of the first tab
+With the prop <TagDocs text='textColor' /> you can customize the color of the first tab
 
 <Playground className="flex items-center">
   <TabGroup textColor="rgba(49, 87, 240, 1)"  variant="primary" >
@@ -145,7 +145,7 @@ With the prop <Tag text='textColor' /> you can customize the color of the first
 
 #### <span>Witdh</span>
 
-With the prop <Tag text='width' /> you can customize the size of the TabGroup
+With the prop <TagDocs text='width' /> you can customize the size of the TabGroup
 
 <Playground className="flex items-center">
   <TabGroup width={400}  >
@@ -173,7 +173,7 @@ With the prop <Tag text='width' /> you can customize the size of the TabGroup
 
 #### <span>IndicatorColor</span>
 
-With the prop <Tag text='indicatorColor' /> you can customize the color of the line below the active tab
+With the prop <TagDocs text='indicatorColor' /> you can customize the color of the line below the active tab
 
 <Playground className="flex items-center">
   <TabGroup indicatorColor='rgba(97, 39, 245, 0.8)' >
@@ -201,7 +201,7 @@ With the prop <Tag text='indicatorColor' /> you can customize the color of the l
 
 #### <span>WideLine</span>
 
-With the prop <Tag text='wideLine' /> you can customize the width of the line under the active tab
+With the prop <TagDocs text='wideLine' /> you can customize the width of the line under the active tab
 
 <Playground className="flex items-center">
   <TabGroup wideLine={8} >
@@ -229,7 +229,7 @@ With the prop <Tag text='wideLine' /> you can customize the width of the line un
 
 #### <span>DisabledText</span>
 
-With the prop <Tag text='disabledText' /> you can customize a message for disabled tabs
+With the prop <TagDocs text='disabledText' /> you can customize a message for disabled tabs
 
 <Playground className="flex items-center">
   <TabGroup disabledText='Comming soon' >
@@ -255,7 +255,7 @@ With the prop <Tag text='disabledText' /> you can customize a message for disabl
 
 #### <span>Hidden</span>
 
-With the prop <Tag text='hidden' /> you can hide the tab
+With the prop <TagDocs text='hidden' /> you can hide the tab
 
 <Playground className="flex items-center">
   <TabGroup >
diff --git a/package-lock.json b/package-lock.json
index c26a8b1..9e6eade 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@algolia/autocomplete-core": "^1.8.3",
         "@docsearch/react": "^3.5.1",
         "@vercel/analytics": "^1.0.1",
-        "dd360-ds": "6.16.14",
+        "dd360-ds": "6.20.1",
         "dd360-utils": "18.1.0",
         "gray-matter": "^4.0.3",
         "i18next": "^22.4.9",
@@ -1525,9 +1525,9 @@
       "dev": true
     },
     "node_modules/dd360-ds": {
-      "version": "6.16.14",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.16.14.tgz",
-      "integrity": "sha512-qkcdW0h8TWFkHAUHBVlFpPqIILE8cr0kJSBb8BXL07KaAZEV+VFr0AyYo9HpM7dgR9k7iVe+JQvFHXd5sEwXrA==",
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.20.1.tgz",
+      "integrity": "sha512-1UUu9wKHao7KZhPEc275+A80PVZ7g9Cgcm8+SGDMtSYMyY96L2fjnZGRZou/5Q3P+ODsksXnQf2TEAG1ZFh1XQ==",
       "dependencies": {
         "@heroicons/react": "^1.0.5",
         "@popperjs/core": "2.11.7",
@@ -1537,7 +1537,7 @@
       },
       "engines": {
         "node": ">=16",
-        "npm": "7 || 8"
+        "npm": ">=7"
       },
       "peerDependencies": {
         "react": ">=17.0.0",
@@ -5567,9 +5567,9 @@
       }
     },
     "node_modules/react-currency-input-field": {
-      "version": "3.6.11",
-      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.11.tgz",
-      "integrity": "sha512-M9vOx1eaioSaYWirm7W2WSBi4bpLg+LK4Gf7C1kNhy6MvoSoOzd0mYZPxA78OC9UBIQ2nM080Wu9D1CwTY6n3w==",
+      "version": "3.6.14",
+      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.14.tgz",
+      "integrity": "sha512-pUM4oK1KkUjjcFH7t6GksbuYwGpNhX3We2l41V9PIyJjm1HVlJGbKNksr0PNXGsQZqXDIKBJxL3TAbTS4cbKgg==",
       "peerDependencies": {
         "react": "^16.9.0 || ^17.0.0 || ^18.0.0"
       }
@@ -8005,9 +8005,9 @@
       "dev": true
     },
     "dd360-ds": {
-      "version": "6.16.14",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.16.14.tgz",
-      "integrity": "sha512-qkcdW0h8TWFkHAUHBVlFpPqIILE8cr0kJSBb8BXL07KaAZEV+VFr0AyYo9HpM7dgR9k7iVe+JQvFHXd5sEwXrA==",
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.20.1.tgz",
+      "integrity": "sha512-1UUu9wKHao7KZhPEc275+A80PVZ7g9Cgcm8+SGDMtSYMyY96L2fjnZGRZou/5Q3P+ODsksXnQf2TEAG1ZFh1XQ==",
       "requires": {
         "@heroicons/react": "^1.0.5",
         "@popperjs/core": "2.11.7",
@@ -10723,9 +10723,9 @@
       "requires": {}
     },
     "react-currency-input-field": {
-      "version": "3.6.11",
-      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.11.tgz",
-      "integrity": "sha512-M9vOx1eaioSaYWirm7W2WSBi4bpLg+LK4Gf7C1kNhy6MvoSoOzd0mYZPxA78OC9UBIQ2nM080Wu9D1CwTY6n3w==",
+      "version": "3.6.14",
+      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.14.tgz",
+      "integrity": "sha512-pUM4oK1KkUjjcFH7t6GksbuYwGpNhX3We2l41V9PIyJjm1HVlJGbKNksr0PNXGsQZqXDIKBJxL3TAbTS4cbKgg==",
       "requires": {}
     },
     "react-dom": {
diff --git a/package.json b/package.json
index e872a17..c6cb680 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@algolia/autocomplete-core": "^1.8.3",
     "@docsearch/react": "^3.5.1",
     "@vercel/analytics": "^1.0.1",
-    "dd360-ds": "6.16.14",
+    "dd360-ds": "6.20.1",
     "dd360-utils": "18.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^22.4.9",
diff --git a/src/components/Layout/SideBarDocs.tsx b/src/components/Layout/SideBarDocs.tsx
index 4047ae7..2d23a54 100644
--- a/src/components/Layout/SideBarDocs.tsx
+++ b/src/components/Layout/SideBarDocs.tsx
@@ -281,6 +281,11 @@ export const components: ComponentObjectProps = {
   },
   components: {
     items: [
+      {
+        label: 'BarList',
+        pathname: 'bar-list',
+        badge: BADGE_TYPES.new
+      },
       {
         label: 'Callout',
         pathname: 'callout',
@@ -292,23 +297,28 @@ export const components: ComponentObjectProps = {
         badge: BADGE_TYPES.new
       },
       {
-        label: 'Date Picker',
-        pathname: 'date-picker'
+        label: 'Confirm Dialog',
+        pathname: 'confirm-dialog',
+        badge: BADGE_TYPES.new
       },
       {
-        label: 'Dropdown',
-        pathname: 'dropdown',
-        badge: BADGE_TYPES.new
+        label: 'Date Picker',
+        pathname: 'date-picker'
       },
       {
         label: 'Dynamic Hero Icon',
         pathname: 'dynamic-hero-icon'
       },
       {
-        label: 'Transition',
-        pathname: 'transition',
+        label: 'Dropdown',
+        pathname: 'dropdown',
         badge: BADGE_TYPES.new
       },
+      {
+        label: 'FeedBackBox',
+        pathname: 'feed-back-box',
+        badge: BADGE_TYPES.coming
+      },
       {
         label: 'Filter Range',
         pathname: 'filter-range'
@@ -318,27 +328,28 @@ export const components: ComponentObjectProps = {
         pathname: 'filter-range-slider'
       },
       {
-        label: 'List',
-        pathname: 'list',
+        label: 'Filter Date',
+        pathname: 'filter-date',
         badge: BADGE_TYPES.new
       },
       {
-        label: 'BarList',
-        pathname: 'bar-list',
+        label: 'Filter Select',
+        pathname: 'filter-select',
         badge: BADGE_TYPES.new
       },
       {
-        label: 'Skeleton',
-        pathname: 'skeleton'
+        label: 'Filter Select Multi',
+        pathname: 'filter-select-multi',
+        badge: BADGE_TYPES.new
       },
       {
-        label: 'Table',
-        pathname: 'table',
-        badge: BADGE_TYPES.new
+        label: 'Language',
+        pathname: 'language',
+        badge: BADGE_TYPES.coming
       },
       {
-        label: 'Timeline',
-        pathname: 'timeline',
+        label: 'List',
+        pathname: 'list',
         badge: BADGE_TYPES.new
       },
       {
@@ -351,44 +362,38 @@ export const components: ComponentObjectProps = {
         badge: BADGE_TYPES.new
       },
       {
-        label: 'FeedBackBox',
-        pathname: 'feed-back-box',
+        label: 'Select Multi',
+        pathname: 'select-multi',
         badge: BADGE_TYPES.coming
       },
       {
-        label: 'Filter Date',
-        pathname: 'filter-date',
-        badge: BADGE_TYPES.new
+        label: 'Skeleton',
+        pathname: 'skeleton'
       },
       {
-        label: 'Filter Select',
-        pathname: 'filter-select',
+        label: 'Table',
+        pathname: 'table',
         badge: BADGE_TYPES.new
       },
       {
-        label: 'Select Multi',
-        pathname: 'select-multi',
-        badge: BADGE_TYPES.coming
-      },
-      {
-        label: 'Language',
-        pathname: 'language',
-        badge: BADGE_TYPES.coming
-      },
-      {
-        label: 'Confirm Dialog',
-        pathname: 'confirm-dialog',
+        label: 'Tag',
+        pathname: 'tag',
         badge: BADGE_TYPES.new
       },
       {
-        label: 'Filter Select Multi',
-        pathname: 'filter-select-multi',
+        label: 'Timeline',
+        pathname: 'timeline',
         badge: BADGE_TYPES.new
       },
       {
         label: 'Tooltip',
         pathname: 'tooltip',
         badge: BADGE_TYPES.new
+      },
+      {
+        label: 'Transition',
+        pathname: 'transition',
+        badge: BADGE_TYPES.new
       }
     ]
   }
diff --git a/src/components/Layout/Tag.tsx b/src/components/Layout/TagDocs.tsx
similarity index 89%
rename from src/components/Layout/Tag.tsx
rename to src/components/Layout/TagDocs.tsx
index 576d9ae..8a9da21 100644
--- a/src/components/Layout/Tag.tsx
+++ b/src/components/Layout/TagDocs.tsx
@@ -5,7 +5,7 @@ interface TagProps {
   text: string
 }
 
-export default function Tag({ text }: TagProps) {
+export default function TagDocs({ text }: TagProps) {
   const {
     themeObject: { extendedPalette }
   } = useTheme()
diff --git a/src/components/Layout/index.ts b/src/components/Layout/index.ts
index bdf9197..6509ca4 100644
--- a/src/components/Layout/index.ts
+++ b/src/components/Layout/index.ts
@@ -5,4 +5,4 @@ export { default as Layout } from './Layout'
 export { default as IllustrationsLayer } from './IllustrationsLayer'
 export { default as FloatingNav } from './FloatingNav'
 export { default as TransitionCustom } from './TransitionCustom'
-export { default as Tag } from './Tag'
+export { default as TagDocs } from './TagDocs'
diff --git a/src/hooks/useGetComponents.tsx b/src/hooks/useGetComponents.tsx
index ce99dc7..b9a3e50 100644
--- a/src/hooks/useGetComponents.tsx
+++ b/src/hooks/useGetComponents.tsx
@@ -9,7 +9,7 @@ import {
   CustomTableDocs,
   Playground,
   BackAndForwardController,
-  Tag
+  TagDocs
 } from '@/components'
 import {
   ConfirmDialogCustom,
@@ -28,7 +28,8 @@ import {
   TabsCustom,
   SwitchCustom,
   AlertReactKnowledge,
-  HeaderDocCustom
+  HeaderDocCustom,
+  TagCustom
 } from '@/modules/docs'
 import { TransitionCustom } from '@/components/Layout'
 import { useTheme } from '@/store/theme-store'
@@ -127,7 +128,7 @@ export function useGetComponents() {
       <div className={isLightTheme ? 'light' : 'dark'}>{children}</div>
     ),
     extendedPalette,
-    Tag,
+    TagDocs,
     WindowEditor,
     CustomTableDocs,
     DynamicHeroIcon,
@@ -151,6 +152,7 @@ export function useGetComponents() {
     BackAndForwardController,
     AlertReactKnowledge,
     HeaderDocCustom,
+    TagCustom,
     ...Components,
     SideBar
     // Add other custom components here as needed ---| Here |---
diff --git a/src/modules/docs/components/TagCustom.tsx b/src/modules/docs/components/TagCustom.tsx
new file mode 100644
index 0000000..7ce58aa
--- /dev/null
+++ b/src/modules/docs/components/TagCustom.tsx
@@ -0,0 +1,39 @@
+import Tag, { ITagProps } from 'dd360-ds/Tag'
+import { CheckCircleIcon, InformationCircleIcon } from '@heroicons/react/solid'
+
+interface CustomTagProps {
+  text: string
+  icon?: 'check' | 'info' | 'warn'
+  variant?: ITagProps['variant']
+  fill: boolean
+  className?: string
+}
+
+const availableIcons = {
+  check: CheckCircleIcon,
+  info: InformationCircleIcon,
+  warn: InformationCircleIcon
+}
+
+const TagCustom = ({
+  icon,
+  text,
+  fill,
+  variant = 'primary',
+  className = '',
+  ...otherProps
+}: CustomTagProps) => {
+  const customIcon = icon ? availableIcons[icon] : undefined
+
+  return (
+    <Tag
+      {...otherProps}
+      icon={customIcon}
+      text={text}
+      className={className}
+      variant={variant}
+    />
+  )
+}
+
+export default TagCustom
diff --git a/src/modules/docs/components/index.ts b/src/modules/docs/components/index.ts
index 5497153..41abd74 100644
--- a/src/modules/docs/components/index.ts
+++ b/src/modules/docs/components/index.ts
@@ -9,3 +9,4 @@ export { default as FilterDateCustom } from './FilterDateCustom'
 export { default as DropdownCustom } from './DropdownCustom'
 export { default as AlertReactKnowledge } from './AlertReactKnowledge'
 export { default as HeaderDocCustom } from './HeaderDocCustom'
+export { default as TagCustom } from './TagCustom'
diff --git a/src/theme/global.css b/src/theme/global.css
index f65a06a..cf22c64 100644
--- a/src/theme/global.css
+++ b/src/theme/global.css
@@ -299,3 +299,31 @@ div ::-webkit-scrollbar-corner {
 .light ::-webkit-scrollbar-thumb:hover {
   background-color: #000000b5;
 }
+
+/*
+* Custom styles for tag component
+*/
+.container-cmpnt-doc span.primary-tag-class {
+  color: #1d4ed8 !important;
+}
+.container-cmpnt-doc span.warning-tag-class {
+  color: #eab308 !important;
+}
+.container-cmpnt-doc span.secondary-tag-class {
+  color: #374151 !important;
+}
+.container-cmpnt-doc span.success-tag-class {
+  color: #047857 !important;
+}
+.container-cmpnt-doc span.primary-filled-tag-class {
+  color: #eff6ff !important;
+}
+.container-cmpnt-doc span.warning-filled-tag-class {
+  color: #fffbeb !important;
+}
+.container-cmpnt-doc span.secondary-filled-tag-class {
+  color: #4b5563 !important;
+}
+.container-cmpnt-doc span.success-filled-tag-class {
+  color: #ecfdf5 !important;
+}