fix: update documentation

docs/buttons/active-button.mdx

@@ -0,0 +1,92 @@
+---
+product: dd360-ds
+title: React ActiveButton component
+components: Button
+---
+
+<br id='top' />
+<br />
+
+<Label>Buttons</Label>
+
+
+# <HeaderDocCustom title="ActiveButton" pathUrl="active-button--btn-primary" />
+
+The ActiveButton component in React provides a convenient way to display a button that is destined to be a redirect.
+
+<br />
+<br />
+##### <span name="floating-nav">Imports</span>
+
+    <WindowEditor codeString="import { ActiveButton } from 'dd360-ds' " />
+    <WindowEditor codeString="import { ActiveButton } from 'dd360-ds/ActiveButton'" />
+    <WindowEditor codeString="import ActiveButton from 'dd360-ds/ActiveButton'" />
+
+<br />
+<br />
+##### <span name="floating-nav">Usage</span>
+
+Use the properties <TagDocs text='active' /> and <TagDocs text='to' /> to make the button active and redirect to the URL specified in the to property.
+
+<Playground className="w-fit">
+    <ActiveButton
+        active
+        to={() => alert('Redirecting...')}
+    >
+        Active Button
+    </ActiveButton>
+</Playground>
+
+<WindowEditor
+    codeString="import { ActiveButton } from 'dd360-ds'
+
+    <ActiveButton
+        active
+        to={() => alert('Redirecting...')}
+    >
+        Active Button
+    </ActiveButton>"
+/>
+
+<br />
+
+##### <span name="floating-nav">Active</span>
+
+To make the button active, use the property active. When the button is active, it will redirect to the URL specified in the to property.
+If the to property is not specified, the button will not redirect and the style will be different.
+
+<Playground className="w-fit">
+    <ActiveButton
+        active={false}
+        to={() => alert('Redirecting...')}
+    >
+        Active Button
+    </ActiveButton>
+</Playground>
+
+<WindowEditor
+    codeString="import { ActiveButton } from 'dd360-ds'
+
+    <ActiveButton
+        active={false}
+        to={() => alert('Redirecting...')}
+    >
+        Active Button
+    </ActiveButton>"
+/>
+
+
+<br />
+<br />
+##### <span name="floating-nav">API Reference</span>
+
+<CustomTableDocs
+    dataTable={[
+        { title: 'active', default: 'true', types: ['boolean'] },
+        { title: 'to', default: null, types: ['function'] },
+        { title: 'children', default: null, types: ['ReactNode'] },
+        { title: '...', default: null, types: ['ButtonHTMLAttributes'] }
+    ]}
+/>
+
+<BackAndForwardController />

docs/buttons/button-shape.mdx

@@ -116,6 +116,8 @@ import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
     dataTable={[
         { title: 'height', default: '3rem', types: ['string'] },
         { title: 'icon', default: null, types: ['ReactNode'] },
+        { title: 'disabled', default: 'false', types: ['boolean'] },
+        { title: 'onClick', default: null, types: ['function'] },
         { title: 'variant (BaseCircleButton exclusive prop)', default: 'circle', types: ['square', 'circle'] }
     ]}
 />

docs/components/badge.mdx

@@ -0,0 +1,125 @@
+---
+product: dd360-ds
+title: React Badge component
+components: Badge
+---
+
+<br />
+<br />
+
+<Label>Components</Label>
+
+# <HeaderDocCustom title="Badge" pathUrl="images-avatar--with-image" />
+
+The Badge component in React provides a convenient way to display a small piece of information, such as a status, in a visually appealing and attention-grabbing manner.
+
+<br />
+
+##### <span name="floating-nav">Imports</span>
+
+<WindowEditor codeString="import { Badge } from 'dd360-ds'" />
+
+##### <span name="floating-nav">Usage</span>
+
+To use the Badge component, you could start by adding the properties text, classNameIcon and className.
+
+Use the Badge component as shown below:
+
+<Playground>
+  <Badge text="Hello world" classNameIcon='w-4' className='p-1' />
+</Playground>
+
+The code snippet below shows how to use the Badge component:
+
+<WindowEditor
+    codeString={`import { Badge } from 'dd360-ds'
+
+ <Badge text="Hello world"/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">Variant</span>
+
+With the prop variant you can customize the appearance of the Badge component. Available options are: warning, infoPrimary, infoSecondary, success, primary, secondary, and error. Default uses: "infoPrimary".
+
+<Playground className="flex flex-col gap-y-2">
+    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="warning"/>
+    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoPrimary"/>
+    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoSecondary"/>
+    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="success"/>
+    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="primary"/>
+    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="secondary"/>
+    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="error"/>
+</Playground>
+
+The code snippet below shows how to set a Badge component variant:
+
+<WindowEditor
+    codeString={`import { Badge } from 'dd360-ds'
+
+<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="warning"/>
+<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoPrimary"/>
+<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoSecondary"/>
+<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="success"/>
+<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="primary"/>
+<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="secondary"/>
+<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="error"/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">Icon</span>
+
+With the prop icon you can customize the icon of the Badge component. Available options are: tag, clock, warning, check, success, exclamation, clipboard-copy, HomeIcon, RefreshIcon, and none. Default uses: "HomeIcon".
+
+<Playground className="flex flex-col gap-y-2">
+    <Badge text="tag" classNameIcon='w-4' className='p-1 text-gray-500' icon="tag"/>
+    <Badge text="clock" classNameIcon='w-4' className='p-1 text-gray-500' icon="clock"/>
+    <Badge text="warning" classNameIcon='w-4' className='p-1 text-gray-500' icon="warning"/>
+    <Badge text="check" classNameIcon='w-4' className='p-1 text-gray-500' icon="check"/>
+    <Badge text="success" classNameIcon='w-4' className='p-1 text-gray-500' icon="success"/>
+    <Badge text="exclamation" classNameIcon='w-4' className='p-1 text-gray-500' icon="exclamation"/>
+    <Badge text="clipboard-copy" classNameIcon='w-4' className='p-1 text-gray-500' icon="clipboard-copy"/>
+    <Badge text="HomeIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="HomeIcon"/>
+    <Badge text="RefreshIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="RefreshIcon"/>
+    <Badge text="none" classNameIcon='w-4' className='p-1 text-gray-500' icon="none"/>
+</Playground>
+
+The code snippet below shows how to set a Badge component icon:
+
+<WindowEditor
+    codeString={`import { Badge } from 'dd360-ds'
+
+<Badge text="tag" classNameIcon='w-4' className='p-1 text-gray-500' icon="tag"/>
+<Badge text="clock" classNameIcon='w-4' className='p-1 text-gray-500' icon="clock"/>
+<Badge text="warning" classNameIcon='w-4' className='p-1 text-gray-500' icon="warning"/>
+<Badge text="check" classNameIcon='w-4' className='p-1 text-gray-500' icon="check"/>
+<Badge text="success" classNameIcon='w-4' className='p-1 text-gray-500' icon="success"/>
+<Badge text="exclamation" classNameIcon='w-4' className='p-1 text-gray-500' icon="exclamation"/>
+<Badge text="clipboard-copy" classNameIcon='w-4' className='p-1 text-gray-500' icon="clipboard-copy"/>
+<Badge text="HomeIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="HomeIcon"/>
+<Badge text="RefreshIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="RefreshIcon"/>
+<Badge text="none" classNameIcon='w-4' className='p-1 text-gray-500' icon="none"/>
+`}/>
+
+<br />
+<br />
+
+##### <span name="floating-nav">API Reference</span>
+
+<CustomTableDocs
+  dataTable={[
+    { title: 'variant', default: 'infoPrimary', types: ['warning', 'infoPrimary', 'infoSecondary', 'success', 'primary', 'secondary', 'error'] },
+    { title: 'icon', default: 'HomeIcon', types: ['tag', 'clock', 'warning', 'check', 'success', 'exclamation', 'clipboard-copy', 'HomeIcon', 'RefreshIcon', 'none'] },
+    { title: 'text', default: 'Home Badge', types: ['string'] },
+    { title: 'classNameIcon', default: null, types: ['string'] },
+    { title: 'classNameText', default: null, types: ['string'] },
+    { title: 'className', default: null, types: ['string'] }
+  ]}
+/>
+
+Note: This documentation assumes that the audience has basic knowledge of React
+and how to use components in React applications.
+
+<BackAndForwardController />

docs/components/callout.mdx

@@ -123,16 +123,41 @@ export default function App() {
     )
 }`} />
 
+<br />
+
+##### <span name="floating-nav">CallToAction</span>
+
+With the prop <TagDocs text='callToAction' /> you can render a custom component in the callout, is a optional prop.
+
+<Playground className="gap-y-2">
+    <Flex gap="4">
+        <CustomCallout title="All systems are operational" callToAction={<Button variant='secondary'>Click here</Button>} />
+    </Flex>
+</Playground>
+
+<WindowEditor
+    codeString={`import { Callout, Flex } from 'dd360-ds'
+import {  XCircleIcon } from '@heroicons/react/solid'
+
+export default function App() {
+    return (
+        <Flex gap="4">
+            <CustomCallout title="All systems are operational" callToAction={<Button variant='secondary'>Click here</Button>} />
+        </Flex>
+    )
+}`} />
+
 <br />
 <br />
 ##### <span name="floating-nav">API Reference</span>
 
 <CustomTableDocs
     dataTable={[
         { title: 'icon', types: ['React.ElementType'] },
-				{ title: 'description', types: ['string'] },
-				{ title: 'variant', default: 'success', types: ['info', 'warning', 'error', 'success'] },
-				{ title: 'title', types: ['string'], required: true },
+        { title: 'description', types: ['string'] },
+        { title: 'variant', default: 'success', types: ['info', 'warning', 'error', 'success'] },
+        { title: 'title', types: ['string'], required: true },
+        { title: 'callToAction', types: ['ReactNode'], default: null }
     ]}
 
 />