diff --git a/internals/test-helpers/index.ts b/internals/test-helpers/index.ts
index d0682557..bea2bff4 100644
--- a/internals/test-helpers/index.ts
+++ b/internals/test-helpers/index.ts
@@ -1,3 +1,3 @@
-export { act, render } from "@testing-library/react";
+export { act, cleanup, fireEvent, render } from "@testing-library/react";
 export { default as userEvent } from "@testing-library/user-event";
 export * from "shadow-dom-testing-library";
diff --git a/package.json b/package.json
index efb0872f..4e143181 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "@types/stream-json": "^1.7.7",
     "@vitejs/plugin-react": "^4.3.3",
     "custom-elements-manifest": "^2.1.0",
+    "element-internals-polyfill": "^1.3.13",
     "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
diff --git a/packages/web-components/jest.setup.ts b/packages/web-components/jest.setup.ts
index ba7aa37a..0638102a 100644
--- a/packages/web-components/jest.setup.ts
+++ b/packages/web-components/jest.setup.ts
@@ -1 +1,12 @@
+import { cleanup } from "@internals/test-helpers";
+import { afterEach, beforeAll, jest } from "@jest/globals";
 import "@testing-library/jest-dom/jest-globals";
+
+beforeAll(async () => {
+  await import("element-internals-polyfill");
+});
+
+afterEach(() => {
+  cleanup();
+  jest.clearAllMocks();
+});
diff --git a/packages/web-components/src/button/base/base-button.ts b/packages/web-components/src/button/base/base-button.ts
index 8e566870..cdd94400 100644
--- a/packages/web-components/src/button/base/base-button.ts
+++ b/packages/web-components/src/button/base/base-button.ts
@@ -119,7 +119,10 @@ export abstract class BaseButton extends BaseClass implements FormSubmitter {
    */
   protected renderSpinner() {
     return html`
-      <div class="icon spinner">
+      <div
+        class="icon spinner"
+        data-testid="tapsi-button-spinner"
+      >
         <tapsi-spinner></tapsi-spinner>
       </div>
     `;
@@ -158,6 +161,7 @@ export abstract class BaseButton extends BaseClass implements FormSubmitter {
     return html`
       <button
         id="root"
+        data-testid="tapsi-button-root"
         part="root"
         class=${rootClasses}
         tabindex=${this.tabIndex}
diff --git a/packages/web-components/src/button/icon-button/icon-button.test.tsx b/packages/web-components/src/button/icon-button/icon-button.test.tsx
new file mode 100644
index 00000000..abc803b0
--- /dev/null
+++ b/packages/web-components/src/button/icon-button/icon-button.test.tsx
@@ -0,0 +1,108 @@
+import { TapsiIconButton } from "./index.ts";
+
+import { render, screen, userEvent } from "@internals/test-helpers";
+import { describe, expect, it, jest } from "@jest/globals";
+import { createComponent } from "@lit/react";
+import React from "react";
+import {
+  itShouldMount,
+  itSupportsClassName,
+  itSupportsDataSetProps,
+  itSupportsStyle,
+} from "../../internals/tests.tsx";
+
+const IconButton = createComponent({
+  react: React,
+  elementClass: TapsiIconButton,
+  tagName: "tapsi-icon-button",
+});
+
+const handleClick = jest.fn();
+const getTestIconButton = () => screen.getByTestId("test-icon-button");
+
+const mockRequiredProps = {
+  "data-testid": "test-icon-button",
+  label: "test-icon-button-label",
+};
+
+describe("🧪 button/icon-button: UI", () => {
+  itShouldMount(IconButton, mockRequiredProps);
+  itSupportsClassName(IconButton, mockRequiredProps);
+  itSupportsStyle(IconButton, mockRequiredProps);
+  itSupportsDataSetProps(IconButton, mockRequiredProps);
+
+  it("should trigger `handleClick` function after clicking on the icon button", async () => {
+    render(
+      <IconButton
+        {...mockRequiredProps}
+        onClick={handleClick}
+      />,
+    );
+    const testIconButton = getTestIconButton();
+
+    const { click } = userEvent.setup();
+
+    await click(testIconButton);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should trigger `handleClick` function after focusing on the button and pressing Enter", async () => {
+    render(
+      <IconButton
+        {...mockRequiredProps}
+        onClick={handleClick}
+      />,
+    );
+    const testIconButton = getTestIconButton();
+
+    const { tab, keyboard } = userEvent.setup();
+
+    await tab();
+    expect(testIconButton).toHaveFocus();
+    await keyboard("{Enter}");
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not be able to trigger `handleClick` function while `disabled`", async () => {
+    render(
+      <IconButton
+        {...mockRequiredProps}
+        onClick={handleClick}
+        disabled
+      />,
+    );
+    const testIconButton = getTestIconButton();
+
+    const { tab, click } = userEvent.setup();
+
+    await tab();
+    expect(testIconButton).not.toHaveFocus();
+
+    await click(testIconButton);
+
+    expect(handleClick).toHaveBeenCalledTimes(0);
+  });
+
+  it("should have `aria-label` when the host has a `label` property", async () => {
+    render(<IconButton {...mockRequiredProps} />);
+
+    expect(
+      await screen.findByShadowTestId("tapsi-button-root"),
+    ).toHaveAttribute("aria-label", "test-icon-button-label");
+  });
+
+  it("should show spinner with `loading` prop", async () => {
+    render(
+      <IconButton
+        {...mockRequiredProps}
+        loading
+      />,
+    );
+
+    expect(
+      await screen.findByShadowTestId("tapsi-button-spinner"),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/packages/web-components/src/button/standard/button.test.tsx b/packages/web-components/src/button/standard/button.test.tsx
new file mode 100644
index 00000000..8c6c391c
--- /dev/null
+++ b/packages/web-components/src/button/standard/button.test.tsx
@@ -0,0 +1,175 @@
+import { TapsiButton } from "./index.ts";
+
+import { render, screen, userEvent } from "@internals/test-helpers";
+import { describe, expect, it, jest } from "@jest/globals";
+import { createComponent } from "@lit/react";
+import React, { type FormEventHandler } from "react";
+import {
+  itShouldMount,
+  itSupportsClassName,
+  itSupportsDataSetProps,
+  itSupportsStyle,
+} from "../../internals/tests.tsx";
+
+const Button = createComponent({
+  react: React,
+  elementClass: TapsiButton,
+  tagName: "tapsi-button",
+});
+
+const handleClick = jest.fn();
+const getTestButton = () => screen.getByTestId("test-button");
+
+const mockRequiredProps = {
+  "data-testid": "test-button",
+  label: "test-button-label",
+};
+
+describe("🧪 button/standard: UI", () => {
+  itShouldMount(Button, mockRequiredProps);
+  itSupportsClassName(Button, mockRequiredProps);
+  itSupportsStyle(Button, mockRequiredProps);
+  itSupportsDataSetProps(Button, mockRequiredProps);
+
+  it("should trigger `handleClick` function after clicking on the button", async () => {
+    render(
+      <Button
+        {...mockRequiredProps}
+        onClick={handleClick}
+      />,
+    );
+    const testButton = getTestButton();
+
+    const { click } = userEvent.setup();
+
+    await click(testButton);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should trigger `handleClick` function after focusing on the button and pressing Enter", async () => {
+    render(
+      <Button
+        {...mockRequiredProps}
+        onClick={handleClick}
+      />,
+    );
+    const testButton = getTestButton();
+
+    const { tab, keyboard } = userEvent.setup();
+
+    await tab();
+    expect(testButton).toHaveFocus();
+    await keyboard("{Enter}");
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not be able to trigger `handleClick` function while `disabled`", async () => {
+    render(
+      <Button
+        {...mockRequiredProps}
+        onClick={handleClick}
+        disabled
+      />,
+    );
+    const testButton = getTestButton();
+
+    const { tab, click } = userEvent.setup();
+
+    await tab();
+    expect(testButton).not.toHaveFocus();
+
+    await click(testButton);
+
+    expect(handleClick).toHaveBeenCalledTimes(0);
+  });
+
+  it("should have `aria-label` when the host has a `label` property", async () => {
+    render(<Button {...mockRequiredProps} />);
+
+    expect(
+      await screen.findByShadowTestId("tapsi-button-root"),
+    ).toHaveAttribute("aria-label", "test-button-label");
+  });
+
+  it("should show spinner with `loading` prop", async () => {
+    render(
+      <Button
+        {...mockRequiredProps}
+        loading
+      />,
+    );
+
+    expect(
+      await screen.findByShadowTestId("tapsi-button-spinner"),
+    ).toBeInTheDocument();
+  });
+
+  it("should work inside a form", async () => {
+    const handleSubmit = jest.fn();
+    const handleReset = jest.fn();
+
+    const submitHandler: FormEventHandler<HTMLFormElement> = event => {
+      event.preventDefault();
+      handleSubmit(event);
+    };
+
+    const resetHandler: FormEventHandler<HTMLFormElement> = event => {
+      event.preventDefault();
+      handleReset(event);
+    };
+
+    const getForm = () => screen.getByTestId<HTMLFormElement>("form");
+
+    const getSubmitButton = () =>
+      screen.getByTestId<TapsiButton>("submit-button");
+
+    const getResetButton = () =>
+      screen.getByTestId<TapsiButton>("reset-button");
+
+    const getCheckbox = () =>
+      screen.getByTestId<HTMLInputElement>("test-checkbox");
+
+    const { click } = userEvent.setup();
+
+    const getFormData = () => new FormData(getForm());
+
+    const getCheckboxValue = () => getFormData().get("n");
+
+    render(
+      <form
+        data-testid="form"
+        onSubmit={submitHandler}
+        onReset={resetHandler}
+      >
+        <input
+          data-testid="test-checkbox"
+          type="checkbox"
+          name="n"
+        />
+        <Button
+          data-testid="submit-button"
+          type="submit"
+        >
+          submit
+        </Button>
+        <Button
+          data-testid="reset-button"
+          type="reset"
+        >
+          reset
+        </Button>
+      </form>,
+    );
+
+    await click(getCheckbox());
+    await click(getSubmitButton());
+
+    expect(handleSubmit.mock.calls.length).toBe(1);
+    expect(getCheckboxValue()).toBe("on");
+
+    await click(getResetButton());
+    expect(handleReset.mock.calls.length).toBe(1);
+  });
+});
diff --git a/packages/web-components/src/internals/index.ts b/packages/web-components/src/internals/index.ts
index 4dff1b42..ddf69331 100644
--- a/packages/web-components/src/internals/index.ts
+++ b/packages/web-components/src/internals/index.ts
@@ -1,3 +1,4 @@
 export * from "./animations.ts";
 export * from "./keyboard.ts";
+export * from "./tests.tsx";
 export * from "./tokens.ts";
diff --git a/packages/web-components/src/internals/tests.tsx b/packages/web-components/src/internals/tests.tsx
new file mode 100644
index 00000000..aff2205e
--- /dev/null
+++ b/packages/web-components/src/internals/tests.tsx
@@ -0,0 +1,110 @@
+import { render } from "@internals/test-helpers";
+import { expect, it } from "@jest/globals";
+import { type ComponentType } from "react";
+
+export const itShouldMount = <T extends JSX.IntrinsicAttributes>(
+  Component: ComponentType<T>,
+  requiredProps: T,
+): void => {
+  it("should be mounted and unmounted without errors", () => {
+    const elem = <Component {...requiredProps} />;
+
+    const result = render(elem);
+
+    expect(() => {
+      result.rerender(elem);
+      result.unmount();
+    }).not.toThrow();
+  });
+};
+
+export const itSupportsClassName = <T extends JSX.IntrinsicAttributes>(
+  Component: ComponentType<T>,
+  requiredProps: T,
+): void => {
+  it("should supports CSS classes", () => {
+    const className = "tapsi-test-class";
+
+    const { container } = render(
+      <Component
+        {...requiredProps}
+        className={className}
+      />,
+    );
+
+    expect(container.firstChild).toHaveClass(className);
+  });
+};
+
+export const itSupportsStyle = <T extends JSX.IntrinsicAttributes>(
+  Component: ComponentType<T>,
+  requiredProps: T,
+  selector?: string,
+  options?: { withPortal?: boolean },
+): void => {
+  it("should supports inline styles", () => {
+    const { withPortal = false } = options ?? {};
+
+    const getTarget = (container: HTMLElement): HTMLElement => {
+      const portal = withPortal
+        ? document.querySelector<HTMLElement>("[data-slot='Portal:Root']")
+        : null;
+
+      return selector
+        ? portal
+          ? (portal.querySelector(selector) as HTMLElement)
+          : (container.querySelector(selector) as HTMLElement)
+        : portal
+          ? (container.firstChild as HTMLElement)
+          : (container.firstChild as HTMLElement);
+    };
+
+    const style = { border: "1px solid red", backgroundColor: "black" };
+
+    const { container } = render(
+      <Component
+        {...requiredProps}
+        style={style}
+      />,
+    );
+
+    expect(getTarget(container)).toHaveStyle(style);
+  });
+};
+
+export const itSupportsDataSetProps = <T extends JSX.IntrinsicAttributes>(
+  Component: ComponentType<T>,
+  requiredProps: T,
+  selector?: string,
+  options?: { withPortal?: boolean },
+): void => {
+  it("supports `data-*` props", () => {
+    const { withPortal = false } = options ?? {};
+
+    const getTarget = (container: HTMLElement): HTMLElement => {
+      const portal = withPortal
+        ? document.querySelector<HTMLElement>("[data-slot='Portal:Root']")
+        : null;
+
+      return selector
+        ? portal
+          ? (portal.querySelector(selector) as HTMLElement)
+          : (container.querySelector(selector) as HTMLElement)
+        : portal
+          ? (container.firstChild as HTMLElement)
+          : (container.firstChild as HTMLElement);
+    };
+
+    const { container } = render(
+      <Component
+        {...requiredProps}
+        data-other-attribute="test"
+      />,
+    );
+
+    expect(getTarget(container)).toHaveAttribute(
+      "data-other-attribute",
+      "test",
+    );
+  });
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index efe1820d..2f149fbc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       custom-elements-manifest:
         specifier: ^2.1.0
         version: 2.1.0
+      element-internals-polyfill:
+        specifier: ^1.3.13
+        version: 1.3.13
       eslint:
         specifier: ^9.12.0
         version: 9.19.0
@@ -2184,6 +2187,9 @@ packages:
   electron-to-chromium@1.5.88:
     resolution: {integrity: sha512-K3C2qf1o+bGzbilTDCTBhTQcMS9KW60yTAaTeeXsfvQuTDDwlokLam/AdqlqcSy9u4UainDgsHV23ksXAOgamw==}
 
+  element-internals-polyfill@1.3.13:
+    resolution: {integrity: sha512-viZ7wJsvh6eFwGQX512zEaccK/c6RRFSerJsdkfe3DW/ZtruvNeOR33fpPZgfXxvqRdU2lK33KM4S6GqaTgVKQ==}
+
   emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
@@ -6591,6 +6597,8 @@ snapshots:
 
   electron-to-chromium@1.5.88: {}
 
+  element-internals-polyfill@1.3.13: {}
+
   emittery@0.13.1: {}
 
   emoji-regex-xs@1.0.0: {}