dxc-technology · Mil4n0r · Oct 14, 2025 · Sep 15, 2025 · Sep 15, 2025 · Sep 15, 2025
diff --git a/apps/website/pages/components/avatar/code.tsx b/apps/website/pages/components/avatar/code.tsx
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import { ReactElement } from "react-markdown/lib/react-markdown";
+import AvatarPageLayout from "screens/components/avatar/AvatarPageLayout";
+import AvatarCodePage from "screens/components/avatar/code/AvatarCodePage";
+
+const Code = () => (
+  <>
+    <Head>
+      <title>Avatar code - Halstack Design</title>
+    </Head>
+    <AvatarCodePage />
+  </>
+);
+
+Code.getLayout = (page: ReactElement) => <AvatarPageLayout>{page}</AvatarPageLayout>;
+
+export default Code;
diff --git a/apps/website/pages/components/avatar/index.tsx b/apps/website/pages/components/avatar/index.tsx
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import { ReactElement } from "react-markdown/lib/react-markdown";
+import AvatarPageLayout from "screens/components/avatar/AvatarPageLayout";
+import AvatarOverviewPage from "screens/components/avatar/overview/AvatarOverviewPage";
+
+const Index = () => (
+  <>
+    <Head>
+      <title>Avatar - Halstack Design System</title>
+    </Head>
+    <AvatarOverviewPage />
+  </>
+);
+
+Index.getLayout = (page: ReactElement) => <AvatarPageLayout>{page}</AvatarPageLayout>;
+
+export default Index;
diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json
@@ -6,6 +6,11 @@
     "path": "/components/application-layout",
     "status": "stable"
   },
+  {
+    "label": "Avatar",
+    "path": "/components/avatar",
+    "status": "experimental"
+  },
   {
     "label": "Badge",
     "path": "/components/badge",

diff --git a/apps/website/screens/components/avatar/AvatarPageLayout.tsx b/apps/website/screens/components/avatar/AvatarPageLayout.tsx
@@ -0,0 +1,31 @@
+import ComponentHeading from "@/common/ComponentHeading";
+import PageHeading from "@/common/PageHeading";
+import TabsPageHeading from "@/common/TabsPageLayout";
+import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import { ReactNode } from "react";
+
+const AvatarPageHeading = ({ children }: { children: ReactNode }) => {
+  const tabs = [
+    { label: "Overview", path: "/components/avatar" },
+    { label: "Code", path: "/components/avatar/code" },
+  ];
+
+  return (
+    <DxcFlex direction="column" gap="var(--spacing-gap-xxl)">
+      <PageHeading>
+        <DxcFlex direction="column" gap="var(--spacing-gap-xl)">
+          <ComponentHeading name="Avatar" />
+          <DxcParagraph>
+            The Avatar component is a key visual element used to identify users, teams, or entities across the
+            interface. It helps create a recognizable and consistent user experience by visually representing people or
+            objects through images, icons, or initials.
+          </DxcParagraph>
+          <TabsPageHeading tabs={tabs} />
+        </DxcFlex>
+      </PageHeading>
+      {children}
+    </DxcFlex>
+  );
+};
+
+export default AvatarPageHeading;
diff --git a/apps/website/screens/components/avatar/code/AvatarCodePage.tsx b/apps/website/screens/components/avatar/code/AvatarCodePage.tsx
@@ -0,0 +1,178 @@
+import { ExtendedTableCode, TableCode } from "@/common/Code";
+import Example from "@/common/example/Example";
+import DxcQuickNavContainer from "@/common/QuickNavContainer";
+import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import basicUsage from "./examples/basicUsage";
+import clickable from "./examples/clickable";
+import tooltip from "./examples/tooltip";
+import status from "./examples/status";
+
+const statusTypeString = `{
+  mode: 'default' | 'info' |
+  'success' | 'warning' | 'error';
+  position: 'top' | 'bottom';
+}`;
+
+const sections = [
+  {
+    title: "Props",
+    content: (
+      <DxcTable>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Default</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>color</td>
+            <td>
+              <TableCode>
+                'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'neutral' |'warning' | 'error'
+              </TableCode>
+            </td>
+            <td>Affects the visual style of the avatar. It can be used following semantic purposes or not.</td>
+            <td>
+              <TableCode>'neutral'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>disabled</td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>If true, the componente will be disabled.</td>
+            <td>
+              <TableCode>false</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>icon</td>
+            <td>
+              <TableCode>string | SVG</TableCode>
+            </td>
+            <td>Material Symbol name or SVG element as the icon that will be placed as avatar.</td>
+            <td>
+              <TableCode>'person'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>imageSrc</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>URL of the image.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>label</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>Text label associated with the avatar. Used to generate and display initials inside the avatar.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>linkHref</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>Page to be opened when the user clicks on the link.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>onClick</td>
+            <td>
+              <TableCode>{"() => void"}</TableCode>
+            </td>
+            <td>This function will be called when the user clicks the avatar. Makes it behave as a button.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>shape</td>
+            <td>
+              <TableCode>'circle' | 'square'</TableCode>
+            </td>
+            <td>This will determine if the avatar will be a rounded square or a circle.</td>
+            <td>
+              <TableCode>'circle'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>size</td>
+            <td>
+              <TableCode>'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'</TableCode>
+            </td>
+            <td>Size of the component.</td>
+            <td>
+              <TableCode>'medium'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>status</td>
+            <td>
+              <ExtendedTableCode>{statusTypeString}</ExtendedTableCode>
+            </td>
+            <td>
+              Defines the color of the status indicator displayed on the avatar and where it will be placed. If not
+              provided, no indicator will be rendered.
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>tabIndex</td>
+            <td>
+              <TableCode>number</TableCode>
+            </td>
+            <td>Value of the tabindex attribute. It will only apply when the onClick property is passed.</td>
+            <td>
+              <TableCode>0</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>title</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>Text to be displayed inside a tooltip when hovering the avatar.</td>
+            <td>-</td>
+          </tr>
+        </tbody>
+      </DxcTable>
+    ),
+  },
+  {
+    title: "Examples",
+    subSections: [
+      {
+        title: "Basic usage",
+        content: <Example example={basicUsage} defaultIsVisible />,
+      },
+      {
+        title: "Clickable",
+        content: <Example example={clickable} defaultIsVisible />,
+      },
+      {
+        title: "Status",
+        content: <Example example={status} defaultIsVisible />,
+      },
+      {
+        title: "Tooltip",
+        content: <Example example={tooltip} defaultIsVisible />,
+      },
+    ],
+  },
+];
+
+const AvatarCodePage = () => (
+  <DxcFlex direction="column" gap="4rem">
+    <DxcQuickNavContainer sections={sections} startHeadingLevel={2} />
+    <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/avatar/code/AvatarCodePage.tsx" />
+  </DxcFlex>
+);
+
+export default AvatarCodePage;
diff --git a/apps/website/screens/components/avatar/code/examples/basicUsage.tsx b/apps/website/screens/components/avatar/code/examples/basicUsage.tsx
@@ -0,0 +1,19 @@
+import { DxcAvatar, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  return (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcAvatar
+        label="John Doe"
+        color="success"
+      />
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcAvatar,
+  DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/avatar/code/examples/clickable.tsx b/apps/website/screens/components/avatar/code/examples/clickable.tsx
@@ -0,0 +1,19 @@
+import { DxcAvatar, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  return (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcAvatar
+        color="success"
+        onClick={() => console.log("Hello")}
+      />
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcAvatar,
+  DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/avatar/code/examples/status.tsx b/apps/website/screens/components/avatar/code/examples/status.tsx
@@ -0,0 +1,19 @@
+import { DxcAvatar, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  return (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcAvatar
+        color="error"
+        status={{mode: "success", position: "top"}}
+      />
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcAvatar,
+  DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/avatar/code/examples/tooltip.tsx b/apps/website/screens/components/avatar/code/examples/tooltip.tsx
@@ -0,0 +1,19 @@
+import { DxcAvatar, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  return (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcAvatar
+        color="success"
+        title="User Name"
+      />
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcAvatar,
+  DxcInset,
+};
+
+export default { code, scope };