diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index d20878a36b892df043ca4758b2816dca268edf1a..0c59449ea591dfc035cbd6e539b9b330ff9cc25b 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -1,7 +1,13 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom/client";
 
-import { Button, ButtonSwitch, Info, Pair } from "./components";
+import {
+    Button,
+    ButtonIncrement,
+    ButtonSwitch,
+    Info,
+    Pair
+} from "./components";
 
 import "./app.css";
 
@@ -13,8 +19,13 @@ export const App = () => {
         <Pair key="tobias" name={"Tobias"} value={`Count ${count}`} />,
         <Pair key="matias" name={"Matias"} value={"3"} />,
         <Pair
-            key="button"
-            name={"Button"}
+            key="button-tobias"
+            name={"Button Increment"}
+            valueNode={<ButtonIncrement value={200} delta={100} />}
+        />,
+        <Pair
+            key="button-cpu"
+            name={"Button Switch"}
             valueNode={
                 <ButtonSwitch
                     options={["NEO", "CLASSIC"]}
diff --git a/examples/web/react/components/button-increment/button-increment.css b/examples/web/react/components/button-increment/button-increment.css
new file mode 100644
index 0000000000000000000000000000000000000000..eb8b0515e4dc532d25565bedfbb18f2d7c721391
--- /dev/null
+++ b/examples/web/react/components/button-increment/button-increment.css
@@ -0,0 +1,7 @@
+.button-increment {
+    display: inline-block;
+}
+
+.button-increment > .value {
+    margin: 0px 8px 0px 8px;
+}
diff --git a/examples/web/react/components/button-increment/button-increment.tsx b/examples/web/react/components/button-increment/button-increment.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8ab81dd6876546f1b3c6f512f585fda2e1614656
--- /dev/null
+++ b/examples/web/react/components/button-increment/button-increment.tsx
@@ -0,0 +1,57 @@
+import React, { FC, useState } from "react";
+import Button from "../button/button";
+
+import "./button-increment.css";
+
+type ButtonIncrementProps = {
+    value: number;
+    delta?: number;
+    size?: string;
+    style?: string[];
+    onClick?: () => void;
+    onChange?: (value: number) => void;
+};
+
+export const ButtonIncrement: FC<ButtonIncrementProps> = ({
+    value,
+    delta = 1,
+    size = "medium",
+    style = ["simple", "border"],
+    onClick,
+    onChange
+}) => {
+    const [valueState, setValue] = useState(value);
+    const classes = () => ["button-increment", size, ...style].join(" ");
+    const _onClick = () => {
+        if (onClick) onClick();
+    };
+    const _onMinusClick = () => {
+        const valueNew = valueState - delta;
+        setValue(valueNew);
+        if (onChange) onChange(valueNew);
+    };
+    const _onPlusClick = () => {
+        const valueNew = valueState + delta;
+        setValue(valueNew);
+        if (onChange) onChange(valueNew);
+    };
+    return (
+        <span className={classes()} onClick={_onClick}>
+            <Button
+                text={"-"}
+                size={size}
+                style={["simple"]}
+                onClick={_onMinusClick}
+            />
+            <span className="value">{valueState}</span>
+            <Button
+                text={"+"}
+                size={size}
+                style={["simple"]}
+                onClick={_onPlusClick}
+            />
+        </span>
+    );
+};
+
+export default ButtonIncrement;
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index 39a5636eeccfd71ac14b39d7ba180973035fdfda..e97b9f9765c22d58d362408c833564a00955a200 100644
--- a/examples/web/react/components/index.ts
+++ b/examples/web/react/components/index.ts
@@ -1,4 +1,5 @@
 export * from "./button/button";
+export * from "./button-increment/button-increment";
 export * from "./button-switch/button-switch";
 export * from "./info/info";
 export * from "./pair/pair";
diff --git a/examples/web/react/components/info/info.tsx b/examples/web/react/components/info/info.tsx
index c55d36d636f3c04e27a5909c7e71f3e22acbd9bd..e91952c84bac9dd7804e36ac321df61e6ab8ea1e 100644
--- a/examples/web/react/components/info/info.tsx
+++ b/examples/web/react/components/info/info.tsx
@@ -7,6 +7,17 @@ type InfoProps = {
     style?: string[];
 };
 
+/**
+ * Builds a new info component with the provided pairs components
+ * setting the style in accordance with the provided list of strings.
+ *
+ * An info component is responsible for the management of multiple
+ * key to "value" pairs.
+ *
+ * @param options The multiple options that are going to be used
+ * to build the info pairs.
+ * @returns The info component with the associated pairs.
+ */
 export const Info: FC<InfoProps> = ({ pairs = [], style = [] }) => {
     const classes = () => ["info", ...style].join(" ");
     return <dl className={classes()}>{pairs}</dl>;