From f5aa692e4e492c048a8eebfc65796e7f524d856b Mon Sep 17 00:00:00 2001
From: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com>
Date: Sun, 3 Nov 2024 13:35:50 +0000
Subject: [PATCH] Add ButtonGroup component to the sistent components page

Signed-off-by: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com>
---
 src/components/SistentNavigation/content.js   |  17 +-
 .../sistent/components/button-group/code.js   |   8 +
 .../components/button-group/guidance.js       |   8 +
 .../sistent/components/button-group/index.js  |   8 +
 .../Sistent/components/button-group/code.js   | 393 ++++++++++++++++++
 .../components/button-group/guidance.js       | 134 ++++++
 .../Sistent/components/button-group/index.js  | 258 ++++++++++++
 .../Projects/Sistent/components/index.js      |   7 +
 8 files changed, 832 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/projects/sistent/components/button-group/code.js
 create mode 100644 src/pages/projects/sistent/components/button-group/guidance.js
 create mode 100644 src/pages/projects/sistent/components/button-group/index.js
 create mode 100644 src/sections/Projects/Sistent/components/button-group/code.js
 create mode 100644 src/sections/Projects/Sistent/components/button-group/guidance.js
 create mode 100644 src/sections/Projects/Sistent/components/button-group/index.js

diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js
index 1932e1dc9356..77069a489955 100644
--- a/src/components/SistentNavigation/content.js
+++ b/src/components/SistentNavigation/content.js
@@ -87,5 +87,20 @@ export const content = [
     id: 23,
     link: "/projects/sistent/components/text-field/code",
     text: "Text Field",
-  }
+  },
+  {
+    id: 24,
+    link: "/projects/sistent/components/button-group",
+    text: "Button Group",
+  },
+  {
+    id: 25,
+    link: "/projects/sistent/components/button-group/guidance",
+    text: "Button Group",
+  },
+  {
+    id: 26,
+    link: "/projects/sistent/components/button-group/code",
+    text: "Button Group",
+  },
 ];
diff --git a/src/pages/projects/sistent/components/button-group/code.js b/src/pages/projects/sistent/components/button-group/code.js
new file mode 100644
index 000000000000..dff80d0676aa
--- /dev/null
+++ b/src/pages/projects/sistent/components/button-group/code.js
@@ -0,0 +1,8 @@
+import React from "react";
+import ButtonGroupCode from "../../../../../sections/Projects/Sistent/components/button-group/code";
+
+const ButtonGroupCodePage = () => {
+  return <ButtonGroupCode />;
+};
+
+export default ButtonGroupCodePage;
diff --git a/src/pages/projects/sistent/components/button-group/guidance.js b/src/pages/projects/sistent/components/button-group/guidance.js
new file mode 100644
index 000000000000..c36d2d6d33f6
--- /dev/null
+++ b/src/pages/projects/sistent/components/button-group/guidance.js
@@ -0,0 +1,8 @@
+import React from "react";
+import ButtonGroupGuidance from "../../../../../sections/Projects/Sistent/components/button-group/guidance";
+
+const ButtonGuidancePage = () => {
+  return <ButtonGroupGuidance />;
+};
+
+export default ButtonGuidancePage;
diff --git a/src/pages/projects/sistent/components/button-group/index.js b/src/pages/projects/sistent/components/button-group/index.js
new file mode 100644
index 000000000000..af543fb3279c
--- /dev/null
+++ b/src/pages/projects/sistent/components/button-group/index.js
@@ -0,0 +1,8 @@
+import React from "react";
+import SistentButtonGroup from "../../../../../sections/Projects/Sistent/components/button-group";
+
+const SistentButtonGroupPage = () => {
+  return <SistentButtonGroup />;
+};
+
+export default SistentButtonGroupPage;
diff --git a/src/sections/Projects/Sistent/components/button-group/code.js b/src/sections/Projects/Sistent/components/button-group/code.js
new file mode 100644
index 000000000000..4b414a557d93
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/button-group/code.js
@@ -0,0 +1,393 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import {
+  SistentThemeProvider,
+  Button,
+  ButtonGroup,
+  Box,
+} from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+import { CodeBlock } from "../button/code-block";
+
+const buttons = [
+  <Button key="one">One</Button>,
+  <Button key="two">Two</Button>,
+  <Button key="three">Three</Button>,
+];
+
+const codes = [
+  `<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+    <ButtonGroup variant="contained" aria-label="Basic bgroup">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </ButtonGroup>
+  </SistentThemeProvider>`,
+  `<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+      <ButtonGroup
+        variant="contained"
+        aria-label="Basic button group"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+      <ButtonGroup variant="outlined" aria-label="Basic bugroup">
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+      <ButtonGroup variant="text" aria-label="Basic button group">
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+    </SistentThemeProvider>`,
+  ` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+      <ButtonGroup
+        orientation="vertical"
+        variant="contained"
+        aria-label="Basic button group"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        orientation="vertical"
+        variant="outlined"
+        aria-label="Basic button group"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        orientation="vertical"
+        variant="text"
+        aria-label="Basic button group"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+    </SistentThemeProvider>`,
+  `<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+      <ButtonGroup
+        disableElevation
+        variant="contained"
+        aria-label="Basic button group"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+  </SistentThemeProvider>`,
+  `<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+      <ButtonGroup
+        size="small"
+        variant="contained"
+        aria-label="Basic button group"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        size="medium"
+        variant="contained"
+        aria-label="Basic button group"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        size="large"
+        variant="contained"
+        aria-label="Basic button group"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+    </SistentThemeProvider>`,
+  `<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+      <ButtonGroup
+        fullWidth
+        variant="contained"
+        aria-label="Basic button group"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+  </SistentThemeProvider>`,
+];
+
+const ButtonGroupCode = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Button Group">
+      <div className="content">
+        <a id="Identity">
+          <h2>Button Group</h2>
+        </a>
+        <p>
+          The ButtonGroup component can be used to group related buttons
+          together. It is a container for multiple buttons that can be used to
+          group buttons together and apply styles to them. This component is
+          useful when you have a group of buttons that need to be styled in a
+          similar way.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/button-group"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/button-group")
+            }
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/button-group/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/button-group/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/button-group/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/button-group/code")
+            }
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The ButtonGroup component can be used to group related buttons
+            together. It is a container for multiple buttons that can be used to
+            group buttons together and apply styles to them. This component is
+            useful when you have a group of buttons that need to be styled in a
+            similar way.
+          </p>
+          <a id="Basic Usage">
+            <h2>Basic Usage</h2>
+          </a>
+          <p>
+            The buttons can be grouped by wrapping them with the ButtonGroup
+            component. They need to be immediate children.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <ButtonGroup
+                  variant="contained"
+                  aria-label="Basic button group"
+                >
+                  {buttons}
+                </ButtonGroup>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="basic-usage" code={codes[0]} />
+          </div>
+          <a id="Button Variant">
+            <h2>Button Variant</h2>
+          </a>
+          <p>
+            The ButtonGroup component supports three variants: Filled, Outlined,
+            and Text.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box
+                  sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    "& > *": {
+                      m: 1,
+                    },
+                  }}
+                >
+                  <ButtonGroup
+                    variant="contained"
+                    aria-label="Basic button group"
+                  >
+                    {buttons}
+                  </ButtonGroup>
+                  <ButtonGroup
+                    variant="outlined"
+                    aria-label="Basic button group"
+                  >
+                    {buttons}
+                  </ButtonGroup>
+                  <ButtonGroup variant="text" aria-label="Basic button group">
+                    {buttons}
+                  </ButtonGroup>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="button-variant" code={codes[1]} />
+          </div>
+          <a id="Vertical Group">
+            <h2>Vertical Group</h2>
+          </a>
+          <p>
+            The ButtonGroup component can be used to create a vertical group of
+            buttons by setting the vertical prop to true.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box
+                  sx={{
+                    display: "flex",
+                    "& > *": {
+                      m: 1,
+                    },
+                  }}
+                >
+                  <ButtonGroup
+                    orientation="vertical"
+                    variant="contained"
+                    aria-label="Basic button group"
+                  >
+                    {buttons}
+                  </ButtonGroup>
+                  <ButtonGroup
+                    orientation="vertical"
+                    variant="outlined"
+                    aria-label="Basic button group"
+                  >
+                    {buttons}
+                  </ButtonGroup>
+                  <ButtonGroup
+                    orientation="vertical"
+                    variant="text"
+                    aria-label="Basic button group"
+                  >
+                    {buttons}
+                  </ButtonGroup>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="vertical-group" code={codes[2]} />
+          </div>
+          <a id="Disable elevation">
+            <h2>Disable elevation</h2>
+          </a>
+          <p>
+            The ButtonGroup component can be used to create a group of buttons
+            with no elevation by setting the disableElevation prop to true.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <ButtonGroup
+                  disableElevation
+                  variant="contained"
+                  aria-label="Basic button group"
+                >
+                  {buttons}
+                </ButtonGroup>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="disable-elevation" code={codes[3]} />
+          </div>
+          <a id="Sizes">
+            <h2>Sizes</h2>
+          </a>
+          <p>
+            For now, two different sizes of buttons exist: 56px height and 48px
+            height.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box
+                  sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    "& > *": {
+                      m: 1,
+                    },
+                  }}
+                >
+                  <ButtonGroup
+                    size="small"
+                    variant="contained"
+                    aria-label="Basic button group"
+                  >
+                    {buttons}
+                  </ButtonGroup>
+                  <ButtonGroup
+                    size="medium"
+                    variant="contained"
+                    aria-label="Basic button group"
+                  >
+                    {buttons}
+                  </ButtonGroup>
+                  <ButtonGroup
+                    size="large"
+                    variant="contained"
+                    aria-label="Basic button group"
+                  >
+                    {buttons}
+                  </ButtonGroup>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="sizes" code={codes[4]} />
+          </div>
+          <a id="Full Width">
+            <h2>Full Width</h2>
+          </a>
+          <p>
+            The ButtonGroup component can be used to create a group of buttons
+            that take up the full width of the container by setting the
+            fullWidth prop to true.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <ButtonGroup
+                  fullWidth
+                  variant="contained"
+                  aria-label="Basic button group"
+                >
+                  {buttons}
+                </ButtonGroup>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="full-width" code={codes[5]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default ButtonGroupCode;
diff --git a/src/sections/Projects/Sistent/components/button-group/guidance.js b/src/sections/Projects/Sistent/components/button-group/guidance.js
new file mode 100644
index 000000000000..bd9ae5122313
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/button-group/guidance.js
@@ -0,0 +1,134 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+
+const ButtonGroupGuidance = () => {
+  const location = useLocation();
+
+  return (
+    <SistentLayout title="Button Group">
+      <div className="content">
+        <a id="Identity">
+          <h2>Button Group</h2>
+        </a>
+        <p>
+          The ButtonGroup component can be used to group related buttons
+          together. It is a container for multiple buttons that can be used to
+          group buttons together and apply styles to them. This component is
+          useful when you have a group of buttons that need to be styled in a
+          similar way.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/button-group"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/button-group")
+            }
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/button-group/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/button-group/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/button-group/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/button-group/code")
+            }
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The ButtonGroup component can be used to group related buttons
+            together. It is a container for multiple buttons that can be used to
+            group buttons together and apply styles to them. This component is
+            useful when you have a group of buttons that need to be styled in a
+            similar way.
+          </p>
+          <a id="Labeling">
+            <h2>Labeling</h2>
+          </a>
+          <p>
+            The ButtonGroup component should be labeled with a heading that
+            describes the group of buttons. This heading should be descriptive
+            and should clearly indicate the purpose of the group of buttons.
+          </p>
+          <a id="Placement">
+            <h2>Placement</h2>
+          </a>
+          <p>
+            The ButtonGroup component should be placed in a location that is
+            easily accessible to users. It should be placed in a prominent
+            location on the page where users can easily find it. The buttons
+            within the ButtonGroup should be large enough to be easily
+            clickable, and there should be enough space between the buttons to
+            prevent accidental clicks. Additionally, the ButtonGroup should be
+            accessible via keyboard navigation, and screen readers should be
+            able to read the labels of the buttons within the group.
+          </p>
+          <a id="Behavior">
+            <h2>Behavior</h2>
+          </a>
+          <p>
+            The ButtonGroup component should behave in a consistent and
+            predictable manner. When a user clicks on a button within the group,
+            the button should respond visually to indicate that it has been
+            clicked. The ButtonGroup should also provide visual feedback when a
+            user hovers over a button, to indicate that the button is clickable.
+            Additionally, the ButtonGroup should be accessible via keyboard
+            navigation, and screen readers should be able to read the labels of
+            the buttons within the group.
+          </p>
+          <a id="Styling">
+            <h2>Styling</h2>
+          </a>
+          <p>
+            The ButtonGroup component should be styled in a way that is
+            consistent with the rest of the application. The buttons within the
+            group should be styled in a way that is visually distinct from other
+            buttons on the page, to indicate that they are part of a group. The
+            ButtonGroup should also be styled in a way that is accessible to
+            users with color blindness or low vision. The buttons within the
+            group should have a visible focus state, and the focus should be set
+            to the first button in the group by default.
+          </p>
+          <a id="Accessibility">
+            <h2>Accessibility</h2>
+          </a>
+          <p>
+            The ButtonGroup component should be accessible to all users,
+            including those with disabilities. The component should be keyboard
+            navigable, and screen readers should be able to read the labels of
+            the buttons within the group. The buttons within the ButtonGroup
+            should have a visible focus state, and the focus should be set to
+            the first button in the group by default. The ButtonGroup should
+            also be styled in a way that is accessible to users with color
+            blindness or low vision.
+          </p>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default ButtonGroupGuidance;
diff --git a/src/sections/Projects/Sistent/components/button-group/index.js b/src/sections/Projects/Sistent/components/button-group/index.js
new file mode 100644
index 000000000000..3748ff273d08
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/button-group/index.js
@@ -0,0 +1,258 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import {
+  SistentThemeProvider,
+  ButtonGroup,
+  Button,
+  Box,
+} from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const buttons = [
+  <Button key="one">One</Button>,
+  <Button key="two">Two</Button>,
+  <Button key="three">Three</Button>,
+];
+
+const SistentButtonGroup = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Button Group">
+      <div className="content">
+        <a id="Identity">
+          <h2>Button Group</h2>
+        </a>
+        <p>
+          The ButtonGroup component can be used to group related buttons
+          together. It is a container for multiple buttons that can be used to
+          group buttons together and apply styles to them. This component is
+          useful when you have a group of buttons that need to be styled in a
+          similar way.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/button-group"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/button-group")
+            }
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/button-group/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/button-group/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/button-group/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/button-group/code")
+            }
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The ButtonGroup component is a container for multiple buttons that
+            can be used to group buttons together and apply styles to them. This
+            component is useful when you have a group of buttons that need to be
+            styled in a similar way. The ButtonGroup component can be used to
+            group related buttons together.
+          </p>
+          <a id="Basic Usage">
+            <h2>Basic Usage</h2>
+          </a>
+          <p>
+            The buttons can be grouped by wrapping them with the ButtonGroup
+            component. They need to be immediate children.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <ButtonGroup variant="contained" aria-label="Basic button group">
+                {buttons}
+              </ButtonGroup>
+            </SistentThemeProvider>
+          </Row>
+          <a id="Button variants">
+            <h2>Button variants</h2>
+          </a>
+          <p>
+            The ButtonGroup component supports the following variants: contained
+            (default), outlined, and text.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  "& > *": {
+                    m: 1,
+                  },
+                }}
+              >
+                <ButtonGroup
+                  variant="contained"
+                  aria-label="Basic button group"
+                >
+                  {buttons}
+                </ButtonGroup>
+                <ButtonGroup variant="outlined" aria-label="Basic button group">
+                  {buttons}
+                </ButtonGroup>
+                <ButtonGroup variant="text" aria-label="Basic button group">
+                  {buttons}
+                </ButtonGroup>
+              </Box>
+            </SistentThemeProvider>
+          </Row>
+          <a id="Vertical Group">
+            <h2>Vertical Group</h2>
+          </a>
+          <p>
+            The ButtonGroup component can be used to create a vertical group of
+            buttons by setting the vertical prop to true.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Box
+                sx={{
+                  display: "flex",
+                  "& > *": {
+                    m: 1,
+                  },
+                }}
+              >
+                <ButtonGroup
+                  orientation="vertical"
+                  variant="contained"
+                  aria-label="Basic button group"
+                >
+                  {buttons}
+                </ButtonGroup>
+                <ButtonGroup
+                  orientation="vertical"
+                  variant="outlined"
+                  aria-label="Basic button group"
+                >
+                  {buttons}
+                </ButtonGroup>
+                <ButtonGroup
+                  orientation="vertical"
+                  variant="text"
+                  aria-label="Basic button group"
+                >
+                  {buttons}
+                </ButtonGroup>
+              </Box>
+            </SistentThemeProvider>
+          </Row>
+          <a id="Disabled elevation">
+            <h2>Disabled elevation</h2>
+          </a>
+          <p>
+            You can remove the elevation with the <code>disableElevation</code>{" "}
+            prop.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <ButtonGroup
+                disableElevation
+                variant="contained"
+                aria-label="Basic button group"
+              >
+                {buttons}
+              </ButtonGroup>
+            </SistentThemeProvider>
+          </Row>
+          <a id="Sizes">
+            <h2>Sizes</h2>
+          </a>
+          <p>
+            The ButtonGroup component supports the following sizes: small,
+            medium (default), and large.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  "& > *": {
+                    m: 1,
+                  },
+                }}
+              >
+                <ButtonGroup
+                  size="small"
+                  variant="contained"
+                  aria-label="Basic button group"
+                >
+                  {buttons}
+                </ButtonGroup>
+                <ButtonGroup
+                  size="medium"
+                  variant="contained"
+                  aria-label="Basic button group"
+                >
+                  {buttons}
+                </ButtonGroup>
+                <ButtonGroup
+                  size="large"
+                  variant="contained"
+                  aria-label="Basic button group"
+                >
+                  {buttons}
+                </ButtonGroup>
+              </Box>
+            </SistentThemeProvider>
+          </Row>
+          <a id="Full width">
+            <h2>Full width</h2>
+          </a>
+          <p>
+            You can make the ButtonGroup full width with the{" "}
+            <code>fullWidth</code> prop.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <ButtonGroup
+                fullWidth
+                variant="contained"
+                aria-label="Basic button group"
+              >
+                {buttons}
+              </ButtonGroup>
+            </SistentThemeProvider>
+          </Row>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default SistentButtonGroup;
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
index 7814f6ed237a..749fb2c5e34e 100644
--- a/src/sections/Projects/Sistent/components/index.js
+++ b/src/sections/Projects/Sistent/components/index.js
@@ -65,6 +65,13 @@ const componentsData = [
       "Containers align and center content, providing responsive layout options for different screen sizes.",
     url: "/projects/sistent/components/container",
   },
+  {
+    id: 9,
+    name: "ButtonGroup",
+    description:
+      "ButtonGroup is a component that groups multiple buttons together.",
+    url: "/projects/sistent/components/button-group",
+  },
 ];
 
 const SistentComponents = () => {