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",