From 748d070bd9f64dcc1f58e71e703c43d1abf41b25 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Thu, 18 Sep 2025 15:19:01 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20update=20Button=20c?=
 =?UTF-8?q?omponent=20props=20and=20refactor=20related=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit modifies the Button component to switch the `variant` and
`color` props, ensuring consistency across various components that
utilize the Button. The changes include updates in the Alert, Modal,
Tooltip, and other components to reflect this new prop structure.
Additionally, several test and story files have been adjusted to
accommodate these changes, enhancing the overall component architecture.
---
 .../Alert/AlertAdditionalExpandable.tsx       |  4 +-
 packages/react/src/components/Alert/Utils.tsx | 14 ++--
 .../react/src/components/Alert/index.spec.tsx | 30 ++++----
 .../src/components/Alert/index.stories.tsx    |  4 +-
 .../src/components/Button/index.stories.tsx   | 74 +++++++++----------
 .../react/src/components/Button/index.tsx     | 16 ++--
 .../src/components/DataGrid/index.spec.tsx    | 32 ++++----
 .../src/components/DataGrid/index.stories.tsx | 18 ++---
 .../components/Forms/DatePicker/Calendar.tsx  | 24 +++---
 .../Forms/DatePicker/CalendarCell.tsx         |  4 +-
 .../Forms/DatePicker/DatePickerAux.tsx        |  8 +-
 .../Forms/FileUploader/FileUploaderMulti.tsx  |  4 +-
 .../components/Forms/Input/InputPassword.tsx  |  4 +-
 .../components/Forms/Select/mono-common.tsx   |  8 +-
 .../components/Forms/Select/multi-common.tsx  |  8 +-
 .../Forms/Select/multi-selected-items.tsx     |  4 +-
 .../components/Modal/ConfirmationModal.tsx    |  2 +-
 .../Modal/DeleteConfirmationModal.tsx         |  4 +-
 .../components/Modal/EdgeCases.stories.tsx    | 18 ++---
 .../src/components/Modal/index.stories.tsx    | 26 +++----
 packages/react/src/components/Modal/index.tsx |  4 +-
 .../react/src/components/Pagination/index.tsx | 16 ++--
 .../react/src/components/Toast/index.spec.tsx |  2 +-
 .../src/components/Toast/index.stories.tsx    |  4 +-
 packages/react/src/components/Toast/index.tsx |  4 +-
 .../src/components/Tooltip/index.spec.tsx     | 20 ++---
 .../src/components/Tooltip/index.stories.tsx  | 16 ++--
 27 files changed, 186 insertions(+), 186 deletions(-)

diff --git a/packages/react/src/components/Alert/AlertAdditionalExpandable.tsx b/packages/react/src/components/Alert/AlertAdditionalExpandable.tsx
index bc9c341..f9803a0 100644
--- a/packages/react/src/components/Alert/AlertAdditionalExpandable.tsx
+++ b/packages/react/src/components/Alert/AlertAdditionalExpandable.tsx
@@ -16,8 +16,8 @@ export const AlertAdditionalExpandable = (props: AlertProps) => {
 
   const iconButton = (
     <Button
-      variant={props.type}
-      color="tertiary"
+      color={props.type}
+      variant="tertiary"
       size="nano"
       aria-label={
         expanded
diff --git a/packages/react/src/components/Alert/Utils.tsx b/packages/react/src/components/Alert/Utils.tsx
index 767db38..46f457b 100644
--- a/packages/react/src/components/Alert/Utils.tsx
+++ b/packages/react/src/components/Alert/Utils.tsx
@@ -14,7 +14,7 @@ export const AlertWrapper = (props: AlertProps) => {
         props.className,
         {
           "c__alert--hide": props.hide,
-        },
+        }
       )}
     >
       {props.children}
@@ -42,8 +42,8 @@ export const AlertClose = (props: AlertProps) => {
   return (
     props.canClose && (
       <Button
-        variant={props.type}
-        color="tertiary"
+        color={props.type}
+        variant="tertiary"
         size="small"
         icon={<span className="material-icons">close</span>}
         aria-label={t("components.alert.close_aria_label")}
@@ -60,8 +60,8 @@ export const AlertButtons = (props: AlertProps) => {
     <>
       {props.tertiaryLabel && (
         <Button
-          color="tertiary"
-          variant={props.type}
+          variant="tertiary"
+          color={props.type}
           onClick={props.tertiaryOnClick}
           {...props.tertiaryProps}
         >
@@ -70,8 +70,8 @@ export const AlertButtons = (props: AlertProps) => {
       )}
       {props.primaryLabel && (
         <Button
-          variant={props.type}
-          color="secondary"
+          color={props.type}
+          variant="secondary"
           onClick={props.primaryOnClick}
           {...props.primaryProps}
         >
diff --git a/packages/react/src/components/Alert/index.spec.tsx b/packages/react/src/components/Alert/index.spec.tsx
index de70129..f615a0a 100644
--- a/packages/react/src/components/Alert/index.spec.tsx
+++ b/packages/react/src/components/Alert/index.spec.tsx
@@ -17,7 +17,7 @@ describe("<Alert/>", () => {
     render(
       <CunninghamProvider>
         <Alert type={type}>Alert component</Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     const $icon = document.querySelector(".c__alert__icon");
     if (icon) {
@@ -32,7 +32,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} additional="Additional information">
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     expect(screen.getByText("Additional information")).toBeInTheDocument();
   });
@@ -42,7 +42,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} primaryLabel="Primary">
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     screen.getByRole("button", { name: "Primary" });
   });
@@ -52,7 +52,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} tertiaryLabel="Tertiary">
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     screen.getByRole("button", { name: "Tertiary" });
   });
@@ -66,7 +66,7 @@ describe("<Alert/>", () => {
         >
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     screen.getByRole("button", { name: "Primary" });
     screen.getByRole("button", { name: "Tertiary" });
@@ -78,14 +78,14 @@ describe("<Alert/>", () => {
           type={VariantType.INFO}
           buttons={
             <>
-              <Button color="primary">Primary Custom</Button>
-              <Button color="secondary">Secondary Custom</Button>
+              <Button variant="primary">Primary Custom</Button>
+              <Button variant="secondary">Secondary Custom</Button>
             </>
           }
         >
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     screen.getByRole("button", { name: "Primary Custom" });
     screen.getByRole("button", { name: "Secondary Custom" });
@@ -96,7 +96,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} canClose={true}>
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
 
     screen.getByText("Alert component");
@@ -165,14 +165,14 @@ describe("<Alert/>", () => {
         >
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
 
     const user = userEvent.setup();
 
     screen.getByText("Alert component");
     expect(
-      screen.queryByText("Additional information"),
+      screen.queryByText("Additional information")
     ).not.toBeInTheDocument();
 
     const $expandButton = screen.getByRole("button", { name: "Expand alert" });
@@ -184,7 +184,7 @@ describe("<Alert/>", () => {
     await user.click($shrinkButton);
 
     expect(
-      screen.queryByText("Additional information"),
+      screen.queryByText("Additional information")
     ).not.toBeInTheDocument();
   });
   it("can expand the alert controlled", async () => {
@@ -226,7 +226,7 @@ describe("<Alert/>", () => {
 
     screen.getByText("Expanded: false");
     expect(
-      screen.queryByText("Additional information"),
+      screen.queryByText("Additional information")
     ).not.toBeInTheDocument();
 
     // Expand from alert.
@@ -246,14 +246,14 @@ describe("<Alert/>", () => {
 
     screen.getByText("Expanded: false");
     expect(
-      screen.queryByText("Additional information"),
+      screen.queryByText("Additional information")
     ).not.toBeInTheDocument();
   });
 
   it("renders with className", async () => {
     render(<Alert className="my-custom-class" />);
     expect(
-      document.querySelector(".c__alert.my-custom-class"),
+      document.querySelector(".c__alert.my-custom-class")
     ).toBeInTheDocument();
   });
 });
diff --git a/packages/react/src/components/Alert/index.stories.tsx b/packages/react/src/components/Alert/index.stories.tsx
index f21d75c..b520cee 100644
--- a/packages/react/src/components/Alert/index.stories.tsx
+++ b/packages/react/src/components/Alert/index.stories.tsx
@@ -58,10 +58,10 @@ export const CustomButtons: Story = {
     canClose: true,
     buttons: (
       <div style={{ display: "flex", gap: "0.5rem" }}>
-        <Button variant="brand" color="primary">
+        <Button color="brand" variant="primary">
           Primary
         </Button>
-        <Button variant="brand" color="secondary">
+        <Button color="brand" variant="secondary">
           Secondary
         </Button>
       </div>
diff --git a/packages/react/src/components/Button/index.stories.tsx b/packages/react/src/components/Button/index.stories.tsx
index 04eba5b..3544527 100644
--- a/packages/react/src/components/Button/index.stories.tsx
+++ b/packages/react/src/components/Button/index.stories.tsx
@@ -11,10 +11,10 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 type AllButtonsProps = ButtonProps & {
-  variant: ButtonProps["variant"];
+  color: ButtonProps["color"];
 };
 
-const AllButtons = ({ variant = "brand" }: AllButtonsProps) => {
+const AllButtons = ({ color = "brand" }: AllButtonsProps) => {
   return (
     <div
       style={{
@@ -33,24 +33,24 @@ const AllButtons = ({ variant = "brand" }: AllButtonsProps) => {
           justifyContent: "start",
         }}
       >
-        <h4 className={`clr-content-semantic-${variant}-primary`}>Primary</h4>
-        <Button {...Primary.args} variant={variant} />
-        <Button {...PrimaryDisabled.args} variant={variant} />
+        <h4 className={`clr-content-semantic-${color}-primary`}>Primary</h4>
+        <Button {...Primary.args} color={color} />
+        <Button {...PrimaryDisabled.args} color={color} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        <h4 className={`clr-content-semantic-${variant}-primary`}>Secondary</h4>
-        <Button {...Secondary.args} variant={variant} />
-        <Button {...SecondaryDisabled.args} variant={variant} />
+        <h4 className={`clr-content-semantic-${color}-primary`}>Secondary</h4>
+        <Button {...Secondary.args} color={color} />
+        <Button {...SecondaryDisabled.args} color={color} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        <h4 className={`clr-content-semantic-${variant}-primary`}>Tertiary</h4>
-        <Button {...BrandTertiary.args} variant={variant} />
-        <Button {...TertiaryDisabled.args} variant={variant} />
+        <h4 className={`clr-content-semantic-${color}-primary`}>Tertiary</h4>
+        <Button {...BrandTertiary.args} color={color} />
+        <Button {...TertiaryDisabled.args} color={color} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        <h4 className={`clr-content-semantic-${variant}-primary`}>Bordered</h4>
-        <Button {...Bordered.args} variant={variant} />
-        <Button {...BrandBorderedDisabled.args} variant={variant} />
+        <h4 className={`clr-content-semantic-${color}-primary`}>Bordered</h4>
+        <Button {...Bordered.args} color={color} />
+        <Button {...BrandBorderedDisabled.args} color={color} />
       </div>
     </div>
   );
@@ -58,44 +58,44 @@ const AllButtons = ({ variant = "brand" }: AllButtonsProps) => {
 
 export const AllBrands: Story = {
   render: () => {
-    return <AllButtons variant="brand" />;
+    return <AllButtons color="brand" />;
   },
 };
 
 export const AllNeutrals: Story = {
   render: () => {
-    return <AllButtons variant="neutral" />;
+    return <AllButtons color="neutral" />;
   },
 };
 
 export const AllWarnings: Story = {
   render: () => {
-    return <AllButtons variant="warning" />;
+    return <AllButtons color="warning" />;
   },
 };
 
 export const AllErrors: Story = {
   render: () => {
-    return <AllButtons variant="error" />;
+    return <AllButtons color="error" />;
   },
 };
 
 export const AllSuccesses: Story = {
   render: () => {
-    return <AllButtons variant="success" />;
+    return <AllButtons color="success" />;
   },
 };
 
 export const AllInfos: Story = {
   render: () => {
-    return <AllButtons variant="info" />;
+    return <AllButtons color="info" />;
   },
 };
 
 const Primary: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
     icon: <span className="material-icons">bolt</span>,
   },
 };
@@ -103,7 +103,7 @@ const Primary: Story = {
 const PrimaryDisabled: Story = {
   args: {
     children: "Disabled",
-    color: "primary",
+    variant: "primary",
     disabled: true,
     icon: <span className="material-icons">bolt</span>,
   },
@@ -112,7 +112,7 @@ const PrimaryDisabled: Story = {
 const Secondary: Story = {
   args: {
     children: "Secondary",
-    color: "secondary",
+    variant: "secondary",
     icon: <span className="material-icons">bolt</span>,
   },
 };
@@ -120,7 +120,7 @@ const Secondary: Story = {
 const SecondaryDisabled: Story = {
   args: {
     children: "Disabled",
-    color: "secondary",
+    variant: "secondary",
     disabled: true,
     icon: <span className="material-icons">bolt</span>,
   },
@@ -129,7 +129,7 @@ const SecondaryDisabled: Story = {
 const BrandTertiary: Story = {
   args: {
     children: "Tertiary",
-    color: "tertiary",
+    variant: "tertiary",
     icon: <span className="material-icons">bolt</span>,
   },
 };
@@ -137,7 +137,7 @@ const BrandTertiary: Story = {
 const TertiaryDisabled: Story = {
   args: {
     children: "Disabled",
-    color: "tertiary",
+    variant: "tertiary",
     disabled: true,
     icon: <span className="material-icons">bolt</span>,
   },
@@ -146,7 +146,7 @@ const TertiaryDisabled: Story = {
 const Bordered: Story = {
   args: {
     children: "Bordered",
-    color: "bordered",
+    variant: "bordered",
     icon: <span className="material-icons">bolt</span>,
   },
 };
@@ -154,7 +154,7 @@ const Bordered: Story = {
 const BrandBorderedDisabled: Story = {
   args: {
     children: " Disabled",
-    color: "bordered",
+    variant: "bordered",
     disabled: true,
     icon: <span className="material-icons">bolt</span>,
   },
@@ -163,14 +163,14 @@ const BrandBorderedDisabled: Story = {
 export const Medium: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
   },
 };
 
 export const Small: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
     size: "small",
   },
 };
@@ -178,7 +178,7 @@ export const Small: Story = {
 export const Nano: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
     size: "nano",
   },
 };
@@ -186,7 +186,7 @@ export const Nano: Story = {
 export const FullWidth: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
     fullWidth: true,
   },
 };
@@ -194,7 +194,7 @@ export const FullWidth: Story = {
 export const FullWidthWithIcon: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
     fullWidth: true,
     icon: <span className="material-icons">bolt</span>,
   },
@@ -204,7 +204,7 @@ export const IconLeft: Story = {
   args: {
     children: "Icon",
     icon: <span className="material-icons">bolt</span>,
-    color: "primary",
+    variant: "primary",
   },
 };
 
@@ -213,7 +213,7 @@ export const IconRight: Story = {
     children: "Icon",
     iconPosition: "right",
     icon: <span className="material-icons">bolt</span>,
-    color: "primary",
+    variant: "primary",
   },
 };
 
@@ -221,7 +221,7 @@ export const IconOnly: Story = {
   args: {
     "aria-label": "Button with only an icon",
     icon: <span className="material-icons">bolt</span>,
-    color: "primary",
+    variant: "primary",
   },
 };
 
@@ -229,7 +229,7 @@ export const AsLink: Story = {
   args: {
     children: "Go to fun-mooc.fr",
     icon: <span className="material-icons">link</span>,
-    color: "primary",
+    variant: "primary",
     href: "https://www.fun-mooc.fr/",
     target: "_blank",
     rel: "noopener noreferrer",
diff --git a/packages/react/src/components/Button/index.tsx b/packages/react/src/components/Button/index.tsx
index c2fc2a5..78ea34c 100644
--- a/packages/react/src/components/Button/index.tsx
+++ b/packages/react/src/components/Button/index.tsx
@@ -13,7 +13,7 @@ export type ButtonElement = HTMLButtonElement & HTMLAnchorElement;
 export type ButtonProps = Omit<DomProps, "color"> &
   RefAttributes<ButtonElement> & {
     size?: "medium" | "small" | "nano";
-    variant?:
+    color?:
       | "brand"
       | "neutral"
       | "info"
@@ -21,7 +21,7 @@ export type ButtonProps = Omit<DomProps, "color"> &
       | "warning"
       | "error"
       | "success";
-    color?: "primary" | "secondary" | "tertiary" | "bordered";
+    variant?: "primary" | "secondary" | "tertiary" | "bordered";
     icon?: ReactNode;
     iconPosition?: "left" | "right";
     active?: boolean;
@@ -30,10 +30,10 @@ export type ButtonProps = Omit<DomProps, "color"> &
 
 export const Button = ({
   children,
-  color = "primary",
+  variant = "primary",
   size = "medium",
   iconPosition = "left",
-  variant = "brand",
+  color = "brand",
   icon,
   active,
   className,
@@ -43,8 +43,8 @@ export const Button = ({
 }: ButtonProps) => {
   const classes = [
     "c__button",
-    "c__button--" + variant,
-    ["c__button--", variant, "--", color].join(""),
+    "c__button--" + color,
+    ["c__button--", color, "--", variant].join(""),
     "c__button--" + size,
     className,
   ];
@@ -60,7 +60,7 @@ export const Button = ({
   if (fullWidth) {
     classes.push("c__button--full-width");
   }
-  if (["primary-text", "tertiary-text"].includes(color)) {
+  if (["primary-text", "tertiary-text"].includes(variant)) {
     classes.push("c__button--text");
   }
   if (props.href && props.disabled) {
@@ -79,6 +79,6 @@ export const Button = ({
       {!!icon && iconPosition === "left" && iconElement}
       {children}
       {!!icon && iconPosition === "right" && iconElement}
-    </>,
+    </>
   );
 };
diff --git a/packages/react/src/components/DataGrid/index.spec.tsx b/packages/react/src/components/DataGrid/index.spec.tsx
index 130fbcc..580fda3 100644
--- a/packages/react/src/components/DataGrid/index.spec.tsx
+++ b/packages/react/src/components/DataGrid/index.spec.tsx
@@ -97,7 +97,7 @@ describe("<DataGrid/>", () => {
 
     fetchMock.mockIf(
       "https://example.com/?page=1&sort=lastName&sortOrder=desc",
-      () => deferred.promise,
+      () => deferred.promise
     );
 
     render(<Component />);
@@ -115,8 +115,8 @@ describe("<DataGrid/>", () => {
         JSON.stringify({
           rows: database.slice(0, 10),
           count: database.length,
-        }),
-      ),
+        })
+      )
     );
 
     // Make sure the loader disappears.
@@ -124,8 +124,8 @@ describe("<DataGrid/>", () => {
       expect(
         screen.queryByRole("status", {
           name: "Loading data",
-        }),
-      ).toBeNull(),
+        })
+      ).toBeNull()
     );
 
     // Make sure the rows are rendered.
@@ -154,7 +154,7 @@ describe("<DataGrid/>", () => {
     deferred = new Deferred();
     fetchMock.mockIf(
       "https://example.com/?page=2&sort=lastName&sortOrder=desc",
-      () => deferred.promise,
+      () => deferred.promise
     );
 
     // Go to page 2.
@@ -187,8 +187,8 @@ describe("<DataGrid/>", () => {
         JSON.stringify({
           rows: database.slice(10, 20),
           count: database.length,
-        }),
-      ),
+        })
+      )
     );
 
     // Make sure the loader disappears.
@@ -196,8 +196,8 @@ describe("<DataGrid/>", () => {
       expect(
         screen.queryByRole("status", {
           name: "Loading data",
-        }),
-      ).toBeNull(),
+        })
+      ).toBeNull()
     );
 
     // Make sure the rows are rendered.
@@ -248,7 +248,7 @@ describe("<DataGrid/>", () => {
                 id: "buttonValidator",
                 renderCell: () => (
                   <Button
-                    color="tertiary"
+                    variant="tertiary"
                     size="small"
                     icon={<span className="material-icons">delete</span>}
                   />
@@ -330,15 +330,15 @@ describe("<DataGrid/>", () => {
       expect(tds.length).toBe(3);
       expect(tds[0].textContent).toEqual(row.firstName);
       expect(Array.from(tds[0].classList)).toContain(
-        "c__datagrid__row__cell--highlight",
+        "c__datagrid__row__cell--highlight"
       );
       expect(tds[1].textContent).toEqual(row.lastName);
       expect(Array.from(tds[1].classList)).not.toContain(
-        "c__datagrid__row__cell--highlight",
+        "c__datagrid__row__cell--highlight"
       );
       expect(tds[2].textContent).toEqual(row.email);
       expect(Array.from(tds[2].classList)).toContain(
-        "c__datagrid__row__cell--highlight",
+        "c__datagrid__row__cell--highlight"
       );
     });
   });
@@ -395,10 +395,10 @@ describe("<DataGrid/>", () => {
           rows={[]}
           className="my-custom-class"
         />
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     expect(
-      document.querySelector(".c__datagrid.my-custom-class"),
+      document.querySelector(".c__datagrid.my-custom-class")
     ).toBeInTheDocument();
   });
 
diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx
index 26db097..b4da8b1 100644
--- a/packages/react/src/components/DataGrid/index.stories.tsx
+++ b/packages/react/src/components/DataGrid/index.stories.tsx
@@ -43,7 +43,7 @@ export const EmptyCustomWithButton = () => {
       emptyPlaceholderLabel="This table is empty, create the first object"
       emptyCta={
         <Button
-          color="secondary"
+          variant="secondary"
           icon={<span className="material-icons">add</span>}
         >
           Create object
@@ -114,7 +114,7 @@ export const ClientSideWithoutPagination = () => {
           id: "actions",
           renderCell: () => (
             <Button
-              color="tertiary"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">delete</span>}
             />
@@ -198,14 +198,14 @@ export const FullServerSide = () => {
     setTimeout(() => {
       // Set the pagination length.
       pagination.setPagesCount(
-        Math.ceil(sortedDatabase.length / pagination.pageSize),
+        Math.ceil(sortedDatabase.length / pagination.pageSize)
       );
       // Select the rows to display on the current page.
       setRows(
         sortedDatabase.slice(
           (pagination.page - 1) * pagination.pageSize,
-          pagination.page * pagination.pageSize,
-        ),
+          pagination.page * pagination.pageSize
+        )
       );
       setIsLoading(false);
     }, 1000);
@@ -254,8 +254,8 @@ export const FullServerSide = () => {
           id: "actions",
           renderCell: () => (
             <Button
-              variant="neutral"
-              color="tertiary"
+              color="neutral"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">delete</span>}
             />
@@ -286,7 +286,7 @@ export const DataListOnly = () => {
           id: "actions",
           renderCell: () => {
             return (
-              <Button size="small" color="secondary">
+              <Button size="small" variant="secondary">
                 Do it
               </Button>
             );
@@ -328,7 +328,7 @@ export const WithColumnWidth = () => {
           size: 50,
           renderCell: () => (
             <Button
-              color="tertiary"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">delete</span>}
             />
diff --git a/packages/react/src/components/Forms/DatePicker/Calendar.tsx b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
index c4136c1..06e96d7 100644
--- a/packages/react/src/components/Forms/DatePicker/Calendar.tsx
+++ b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
@@ -256,8 +256,8 @@ const CalendarAux = ({
         <div className="c__calendar__wrapper__header">
           <div className="c__calendar__wrapper__header__actions">
             <Button
-              variant="neutral"
-              color="tertiary"
+              color="neutral"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_before</span>}
               {...{
@@ -272,8 +272,8 @@ const CalendarAux = ({
             />
             <Button
               className="c__calendar__wrapper__header__actions__dropdown"
-              variant="neutral"
-              color="tertiary"
+              color="neutral"
+              variant="tertiary"
               size="small"
               iconPosition="right"
               icon={<span className="material-icons">arrow_drop_down</span>}
@@ -285,8 +285,8 @@ const CalendarAux = ({
               )}
             </Button>
             <Button
-              variant="neutral"
-              color="tertiary"
+              color="neutral"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_next</span>}
               type="button"
@@ -302,8 +302,8 @@ const CalendarAux = ({
           </div>
           <div className="c__calendar__wrapper__header__actions">
             <Button
-              variant="neutral"
-              color="tertiary"
+              color="neutral"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_before</span>}
               onClick={() => state.focusPreviousSection(true)}
@@ -318,8 +318,8 @@ const CalendarAux = ({
             />
             <Button
               className="c__calendar__wrapper__header__actions__dropdown"
-              variant="neutral"
-              color="tertiary"
+              color="neutral"
+              variant="tertiary"
               size="small"
               iconPosition="right"
               icon={<span className="material-icons">arrow_drop_down</span>}
@@ -331,8 +331,8 @@ const CalendarAux = ({
               )}
             </Button>
             <Button
-              variant="neutral"
-              color="tertiary"
+              color="neutral"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_next</span>}
               onClick={() => state.focusNextSection(true)}
diff --git a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
index fc1ca59..9914de4 100644
--- a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
+++ b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
@@ -58,8 +58,8 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
       >
         <Button
           size="small"
-          variant={isSelected ? "brand" : "neutral"}
-          color={
+          color={isSelected ? "brand" : "neutral"}
+          variant={
             (
               isRangeCalendar(state)
                 ? isSelectionStart || isSelectionEnd
diff --git a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
index 7c34715..87aef04 100644
--- a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
@@ -150,8 +150,8 @@ const DatePickerAux = ({
                     ? "components.forms.date_picker.toggle_button_aria_label_close"
                     : "components.forms.date_picker.toggle_button_aria_label_open"
                 )}
-                variant="neutral"
-                color="tertiary"
+                color="neutral"
+                variant="tertiary"
                 size="small"
                 className="c__date-picker__wrapper__toggle"
                 icon={
@@ -167,8 +167,8 @@ const DatePickerAux = ({
                 "c__date-picker__inner__action--hidden":
                   labelAsPlaceholder || disabled,
               })}
-              variant="neutral"
-              color="tertiary"
+              color="neutral"
+              variant="tertiary"
               size="nano"
               icon={<span className="material-icons">close</span>}
               onClick={onClear}
diff --git a/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx b/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
index fddbbc0..b37bc81 100644
--- a/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
+++ b/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
@@ -38,8 +38,8 @@ export const FileUploaderMulti = ({
               <div className="c__file-uploader__file__specs">
                 <span>{formatBytes(file.size)}</span>
                 <Button
-                  color="tertiary"
-                  variant="neutral"
+                  variant="tertiary"
+                  color="neutral"
                   size="nano"
                   aria-label={t(
                     "components.forms.file_uploader.delete_file_name",
diff --git a/packages/react/src/components/Forms/Input/InputPassword.tsx b/packages/react/src/components/Forms/Input/InputPassword.tsx
index 3ce110f..c74199e 100644
--- a/packages/react/src/components/Forms/Input/InputPassword.tsx
+++ b/packages/react/src/components/Forms/Input/InputPassword.tsx
@@ -22,8 +22,8 @@ export const InputPassword = (props: Omit<InputProps, "rightIcon">) => {
               {showPassword ? "visibility_off" : "visibility"}
             </span>
           }
-          color="tertiary"
-          variant="neutral"
+          variant="tertiary"
+          color="neutral"
           size="small"
           aria-label={t(
             `components.forms.input.password.${showPassword ? "hide" : "show"}_password`
diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
index 56a4370..eb98277 100644
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -138,8 +138,8 @@ export const SelectMonoAux = ({
                   {clearable && !disabled && downshiftReturn.selectedItem && (
                     <>
                       <Button
-                        color="tertiary"
-                        variant="neutral"
+                        variant="tertiary"
+                        color="neutral"
                         size="nano"
                         aria-label={t(
                           "components.forms.select.clear_button_aria_label"
@@ -157,8 +157,8 @@ export const SelectMonoAux = ({
                   )}
 
                   <Button
-                    color="tertiary"
-                    variant="neutral"
+                    variant="tertiary"
+                    color="neutral"
                     size="nano"
                     className="c__select__inner__actions__open"
                     icon={
diff --git a/packages/react/src/components/Forms/Select/multi-common.tsx b/packages/react/src/components/Forms/Select/multi-common.tsx
index 80d81bd..b8855ef 100644
--- a/packages/react/src/components/Forms/Select/multi-common.tsx
+++ b/packages/react/src/components/Forms/Select/multi-common.tsx
@@ -117,8 +117,8 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
                     props.selectedItems.length > 0 && (
                       <>
                         <Button
-                          color="tertiary"
-                          variant="neutral"
+                          variant="tertiary"
+                          color="neutral"
                           size="nano"
                           aria-label={t(
                             "components.forms.select.clear_all_button_aria_label"
@@ -135,8 +135,8 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
                       </>
                     )}
                   <Button
-                    color="tertiary"
-                    variant="neutral"
+                    variant="tertiary"
+                    color="neutral"
                     size="nano"
                     className="c__select__inner__actions__open"
                     icon={
diff --git a/packages/react/src/components/Forms/Select/multi-selected-items.tsx b/packages/react/src/components/Forms/Select/multi-selected-items.tsx
index 3ccd3a2..8576e94 100644
--- a/packages/react/src/components/Forms/Select/multi-selected-items.tsx
+++ b/packages/react/src/components/Forms/Select/multi-selected-items.tsx
@@ -39,8 +39,8 @@ const SelectedItemsChips = ({
         <SelectedOption option={selectedItemForRender} {...props} />
         <Button
           tabIndex={-1}
-          color="tertiary"
-          variant="neutral"
+          variant="tertiary"
+          color="neutral"
           disabled={disabled}
           size="small"
           aria-label={t("components.forms.select.clear_button_aria_label")}
diff --git a/packages/react/src/components/Modal/ConfirmationModal.tsx b/packages/react/src/components/Modal/ConfirmationModal.tsx
index 7e5e4f7..c5359b5 100644
--- a/packages/react/src/components/Modal/ConfirmationModal.tsx
+++ b/packages/react/src/components/Modal/ConfirmationModal.tsx
@@ -20,7 +20,7 @@ export const ConfirmationModal = ({
       actions={
         <>
           <Button
-            color="secondary"
+            variant="secondary"
             fullWidth={true}
             onClick={() => onDecide(null)}
           >
diff --git a/packages/react/src/components/Modal/DeleteConfirmationModal.tsx b/packages/react/src/components/Modal/DeleteConfirmationModal.tsx
index d92b737..c10d2e6 100644
--- a/packages/react/src/components/Modal/DeleteConfirmationModal.tsx
+++ b/packages/react/src/components/Modal/DeleteConfirmationModal.tsx
@@ -23,7 +23,7 @@ export const DeleteConfirmationModal = ({
       actions={
         <>
           <Button
-            color="secondary"
+            variant="secondary"
             fullWidth={true}
             onClick={() => onDecide(null)}
           >
@@ -32,7 +32,7 @@ export const DeleteConfirmationModal = ({
           <Button
             fullWidth={true}
             onClick={() => onDecide("delete")}
-            variant="error"
+            color="error"
           >
             {t("components.modals.helpers.delete_confirmation.delete")}
           </Button>
diff --git a/packages/react/src/components/Modal/EdgeCases.stories.tsx b/packages/react/src/components/Modal/EdgeCases.stories.tsx
index 58367ac..558474d 100644
--- a/packages/react/src/components/Modal/EdgeCases.stories.tsx
+++ b/packages/react/src/components/Modal/EdgeCases.stories.tsx
@@ -57,11 +57,11 @@ export const StackedModals = {
             Open Modals
           </Button>
           <Modal
-            leftActions={<Button color="tertiary">Tertiary</Button>}
+            leftActions={<Button variant="tertiary">Tertiary</Button>}
             rightActions={
               <>
-                <Button color="secondary">Secondary</Button>
-                <Button color="primary">Primary</Button>
+                <Button variant="secondary">Secondary</Button>
+                <Button variant="primary">Primary</Button>
               </>
             }
             size={ModalSize.LARGE}
@@ -70,11 +70,11 @@ export const StackedModals = {
             {longLorem.text}
           </Modal>
           <Modal
-            leftActions={<Button color="tertiary">Tertiary</Button>}
+            leftActions={<Button variant="tertiary">Tertiary</Button>}
             rightActions={
               <>
-                <Button color="secondary">Secondary</Button>
-                <Button color="primary">Primary</Button>
+                <Button variant="secondary">Secondary</Button>
+                <Button variant="primary">Primary</Button>
               </>
             }
             size={ModalSize.MEDIUM}
@@ -83,11 +83,11 @@ export const StackedModals = {
             {longLorem.text}
           </Modal>
           <Modal
-            leftActions={<Button color="tertiary">Tertiary</Button>}
+            leftActions={<Button variant="tertiary">Tertiary</Button>}
             rightActions={
               <>
-                <Button color="secondary">Secondary</Button>
-                <Button color="primary">Primary</Button>
+                <Button variant="secondary">Secondary</Button>
+                <Button variant="primary">Primary</Button>
               </>
             }
             size={ModalSize.SMALL}
diff --git a/packages/react/src/components/Modal/index.stories.tsx b/packages/react/src/components/Modal/index.stories.tsx
index 405cb57..4fcd868 100644
--- a/packages/react/src/components/Modal/index.stories.tsx
+++ b/packages/react/src/components/Modal/index.stories.tsx
@@ -97,7 +97,7 @@ export const PrimaryButton: Story = {
   args: {
     size: ModalSize.MEDIUM,
     rightActions: (
-      <Button color="primary" fullWidth={true}>
+      <Button variant="primary" fullWidth={true}>
         Primary
       </Button>
     ),
@@ -108,7 +108,7 @@ export const SecondaryButton: Story = {
   args: {
     size: ModalSize.MEDIUM,
     rightActions: (
-      <Button color="secondary" fullWidth={true}>
+      <Button variant="secondary" fullWidth={true}>
         Secondary
       </Button>
     ),
@@ -119,12 +119,12 @@ export const TwoButtons: Story = {
   args: {
     size: ModalSize.MEDIUM,
     leftActions: (
-      <Button color="secondary" fullWidth={true}>
+      <Button variant="secondary" fullWidth={true}>
         Secondary
       </Button>
     ),
     rightActions: (
-      <Button color="primary" fullWidth={true}>
+      <Button variant="primary" fullWidth={true}>
         Primary
       </Button>
     ),
@@ -135,16 +135,16 @@ export const ThreeButtons: Story = {
   args: {
     size: ModalSize.MEDIUM,
     leftActions: (
-      <Button color="tertiary" fullWidth={true}>
+      <Button variant="tertiary" fullWidth={true}>
         Tertiary
       </Button>
     ),
     rightActions: (
       <>
-        <Button color="secondary" fullWidth={true}>
+        <Button variant="secondary" fullWidth={true}>
           Secondary
         </Button>
-        <Button color="primary" fullWidth={true}>
+        <Button variant="primary" fullWidth={true}>
           Primary
         </Button>
       </>
@@ -157,8 +157,8 @@ export const CenterButtons: Story = {
     size: ModalSize.MEDIUM,
     actions: (
       <>
-        <Button color="secondary">Secondary</Button>
-        <Button color="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="primary">Primary</Button>
       </>
     ),
   },
@@ -179,7 +179,7 @@ export const ExampleApplication: Story = {
         touch.
       </>
     ),
-    rightActions: <Button color="primary">I understand</Button>,
+    rightActions: <Button variant="primary">I understand</Button>,
   },
   parameters: {
     docs: {
@@ -193,11 +193,11 @@ export const ExampleApplication: Story = {
 export const FullWithContent: Story = {
   args: {
     size: ModalSize.FULL,
-    leftActions: <Button color="tertiary">Tertiary</Button>,
+    leftActions: <Button variant="tertiary">Tertiary</Button>,
     rightActions: (
       <>
-        <Button color="secondary">Secondary</Button>
-        <Button color="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="primary">Primary</Button>
       </>
     ),
     children: longLorem.text,
diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx
index 6537921..e4f9c67 100644
--- a/packages/react/src/components/Modal/index.tsx
+++ b/packages/react/src/components/Modal/index.tsx
@@ -99,8 +99,8 @@ export const ModalInner = ({ closeOnEsc = true, ...props }: ModalProps) => {
           <div className="c__modal__close">
             <Button
               icon={<span className="material-icons">close</span>}
-              color="tertiary"
-              variant="neutral"
+              variant="tertiary"
+              color="neutral"
               size="small"
               onClick={props.onClose}
             />
diff --git a/packages/react/src/components/Pagination/index.tsx b/packages/react/src/components/Pagination/index.tsx
index 75c710f..4131047 100644
--- a/packages/react/src/components/Pagination/index.tsx
+++ b/packages/react/src/components/Pagination/index.tsx
@@ -106,8 +106,8 @@ export const Pagination = ({
     <div className="c__pagination">
       <div className="c__pagination__list">
         <Button
-          variant="neutral"
-          color="tertiary"
+          color="neutral"
+          variant="tertiary"
           aria-label={t("components.pagination.previous_aria")}
           onClick={onPreviousClick}
           disabled={!canPrevious}
@@ -122,8 +122,8 @@ export const Pagination = ({
             )}
             {_page === page ? (
               <Button
-                variant="neutral"
-                color="bordered"
+                color="neutral"
+                variant="bordered"
                 active={true}
                 aria-label={t("components.pagination.current_page_aria", {
                   page: _page,
@@ -134,8 +134,8 @@ export const Pagination = ({
               </Button>
             ) : (
               <Button
-                variant="neutral"
-                color="tertiary"
+                color="neutral"
+                variant="tertiary"
                 aria-label={t("components.pagination.goto_page_aria", {
                   page: _page,
                 })}
@@ -148,8 +148,8 @@ export const Pagination = ({
           </Fragment>
         ))}
         <Button
-          variant="neutral"
-          color="tertiary"
+          color="neutral"
+          variant="tertiary"
           aria-label={t("components.pagination.next_aria")}
           onClick={onNextClick}
           disabled={!canNext}
diff --git a/packages/react/src/components/Toast/index.spec.tsx b/packages/react/src/components/Toast/index.spec.tsx
index c96b5e8..4f0ea90 100644
--- a/packages/react/src/components/Toast/index.spec.tsx
+++ b/packages/react/src/components/Toast/index.spec.tsx
@@ -97,7 +97,7 @@ describe("<Toast />", () => {
         <Button
           onClick={() =>
             toast("Toast content", VariantType.NEUTRAL, {
-              actions: <Button color="tertiary">Tertiary</Button>,
+              actions: <Button variant="tertiary">Tertiary</Button>,
             })
           }
         >
diff --git a/packages/react/src/components/Toast/index.stories.tsx b/packages/react/src/components/Toast/index.stories.tsx
index 4b4cdaa..06807bb 100644
--- a/packages/react/src/components/Toast/index.stories.tsx
+++ b/packages/react/src/components/Toast/index.stories.tsx
@@ -78,8 +78,8 @@ export const InfoCustom: Story = {
     type: VariantType.INFO,
     actions: (
       <>
-        <Button color="primary">Primary</Button>
-        <Button color="secondary">Secondary</Button>
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
       </>
     ),
   },
diff --git a/packages/react/src/components/Toast/index.tsx b/packages/react/src/components/Toast/index.tsx
index 5840151..f3a8378 100644
--- a/packages/react/src/components/Toast/index.tsx
+++ b/packages/react/src/components/Toast/index.tsx
@@ -45,7 +45,7 @@ export const Toast = (props: ToastProps) => {
 
   const removeAfterAnimation = async () => {
     await Promise.allSettled(
-      container.current!.getAnimations().map((animation) => animation.finished),
+      container.current!.getAnimations().map((animation) => animation.finished)
     );
     props.onDelete?.();
   };
@@ -71,7 +71,7 @@ export const Toast = (props: ToastProps) => {
         {props.primaryLabel && (
           <div className="c__toast__content__buttons">
             <Button
-              color="primary"
+              variant="primary"
               onClick={props.primaryOnClick}
               {...props.primaryProps}
             >
diff --git a/packages/react/src/components/Tooltip/index.spec.tsx b/packages/react/src/components/Tooltip/index.spec.tsx
index cbef0fc..8822a07 100644
--- a/packages/react/src/components/Tooltip/index.spec.tsx
+++ b/packages/react/src/components/Tooltip/index.spec.tsx
@@ -14,10 +14,10 @@ describe("<Tooltip />", () => {
   it("appear on button hover and then disappear", async () => {
     render(
       <Tooltip content="Hi there" closeDelay={0}>
-        <Button size="nano" color="tertiary">
+        <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>,
+      </Tooltip>
     );
 
     const button = screen.getByRole("button");
@@ -33,10 +33,10 @@ describe("<Tooltip />", () => {
   it("appear on button focus and then disappear", async () => {
     render(
       <Tooltip content="Hi there" closeDelay={0}>
-        <Button size="nano" color="tertiary">
+        <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>,
+      </Tooltip>
     );
 
     expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -51,10 +51,10 @@ describe("<Tooltip />", () => {
   it("sets entering and exiting class", async () => {
     render(
       <Tooltip content="Hi there" closeDelay={0}>
-        <Button size="nano" color="tertiary">
+        <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>,
+      </Tooltip>
     );
 
     expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -102,10 +102,10 @@ describe("<Tooltip />", () => {
         }
         closeDelay={0}
       >
-        <Button size="nano" color="tertiary">
+        <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>,
+      </Tooltip>
     );
 
     const button = screen.getByRole("button");
@@ -128,10 +128,10 @@ describe("<Tooltip />", () => {
         closeDelay={0}
         className="my-custom-class"
       >
-        <Button size="nano" color="tertiary">
+        <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>,
+      </Tooltip>
     );
 
     const button = screen.getByRole("button");
diff --git a/packages/react/src/components/Tooltip/index.stories.tsx b/packages/react/src/components/Tooltip/index.stories.tsx
index dfb50d7..57ca2a7 100644
--- a/packages/react/src/components/Tooltip/index.stories.tsx
+++ b/packages/react/src/components/Tooltip/index.stories.tsx
@@ -26,8 +26,8 @@ export const Default = {
       <Button
         size="small"
         icon={<span className="material-icons">info</span>}
-        color="tertiary"
-        variant="neutral"
+        variant="tertiary"
+        color="neutral"
       />
     ),
     content:
@@ -40,22 +40,22 @@ export const Placements = {
     return (
       <div>
         <Tooltip placement="left" content="Hi there">
-          <Button size="nano" color="tertiary" variant="neutral">
+          <Button size="nano" variant="tertiary" color="neutral">
             ⬅️
           </Button>
         </Tooltip>
         <Tooltip placement="bottom" content="Hi there">
-          <Button size="nano" color="tertiary" variant="neutral">
+          <Button size="nano" variant="tertiary" color="neutral">
             ⬇️
           </Button>
         </Tooltip>
         <Tooltip placement="top" content="Hi there">
-          <Button size="nano" color="tertiary" variant="neutral">
+          <Button size="nano" variant="tertiary" color="neutral">
             ⬆️
           </Button>
         </Tooltip>
         <Tooltip placement="right" content="Hi there">
-          <Button size="nano" color="tertiary" variant="neutral">
+          <Button size="nano" variant="tertiary" color="neutral">
             ➡️
           </Button>
         </Tooltip>
@@ -131,8 +131,8 @@ export const WithHtml = {
       <Button
         size="small"
         icon={<span className="material-icons">info</span>}
-        color="tertiary"
-        variant="neutral"
+        variant="tertiary"
+        color="neutral"
       />
     ),
     placement: "right",