✨(react) implement Button with official tokens

Now that we have all the official design tokens we can use them
to build the button component in various colors matching the
design system's ones.

packages/react/src/components/Button/index.spec.tsx

@@ -1,7 +1,8 @@
 import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
 import React from "react";
 import { buildTheme, loadTokens } from "tests/Theme";
+import userEvent from "@testing-library/user-event";
 import { Button } from "./index";
 
 describe("<Button/>", () => {
@@ -11,10 +12,33 @@ describe("<Button/>", () => {
     expect(button.classList.contains("c__button")).toBe(true);
   });
 
+  it("call onClick when click occurs", async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Test button</Button>);
+    const button = screen.getByRole("button", { name: "Test button" });
+    expect(handleClick).not.toBeCalled();
+    user.click(button);
+    await waitFor(() => expect(handleClick).toHaveBeenCalled());
+  });
+
+  it("does not call onClick when click occurs on a disabled button", async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(
+      <Button onClick={handleClick} disabled={true}>
+        Test button
+      </Button>
+    );
+    const button = screen.getByRole("button", { name: "Test button" });
+    expect(handleClick).not.toBeCalled();
+    await act(async () => user.click(button));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
   it("uses custom token", async () => {
     await buildTheme();
     const tokens = await loadTokens();
     expect(tokens.components.button["border-radius"]).toBeDefined();
-    expect(tokens.components.button.shadow).toBeDefined();
   });
 });