diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 0c59449ea591dfc035cbd6e539b9b330ff9cc25b..9bf41756900f0badc67cf7e729d2a5155c085d44 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -21,7 +21,9 @@ export const App = () => {
         <Pair
             key="button-tobias"
             name={"Button Increment"}
-            valueNode={<ButtonIncrement value={200} delta={100} />}
+            valueNode={
+                <ButtonIncrement value={200} delta={100} suffix={"Hz"} />
+            }
         />,
         <Pair
             key="button-cpu"
diff --git a/examples/web/react/components/button-increment/button-increment.css b/examples/web/react/components/button-increment/button-increment.css
index eb8b0515e4dc532d25565bedfbb18f2d7c721391..57f94577dd1a79df31fcae63964153ab1de88fcc 100644
--- a/examples/web/react/components/button-increment/button-increment.css
+++ b/examples/web/react/components/button-increment/button-increment.css
@@ -5,3 +5,11 @@
 .button-increment > .value {
     margin: 0px 8px 0px 8px;
 }
+
+.button-increment > .prefix {
+    margin-left: 8px;
+}
+
+.button-increment > .suffix {
+    margin-right: 8px;
+}
diff --git a/examples/web/react/components/button-increment/button-increment.tsx b/examples/web/react/components/button-increment/button-increment.tsx
index 8ab81dd6876546f1b3c6f512f585fda2e1614656..19b49416140db34c38b6a1682340bbb657e78fb9 100644
--- a/examples/web/react/components/button-increment/button-increment.tsx
+++ b/examples/web/react/components/button-increment/button-increment.tsx
@@ -6,6 +6,8 @@ import "./button-increment.css";
 type ButtonIncrementProps = {
     value: number;
     delta?: number;
+    prefix?: string;
+    suffix?: string;
     size?: string;
     style?: string[];
     onClick?: () => void;
@@ -15,6 +17,8 @@ type ButtonIncrementProps = {
 export const ButtonIncrement: FC<ButtonIncrementProps> = ({
     value,
     delta = 1,
+    prefix,
+    suffix,
     size = "medium",
     style = ["simple", "border"],
     onClick,
@@ -43,7 +47,9 @@ export const ButtonIncrement: FC<ButtonIncrementProps> = ({
                 style={["simple"]}
                 onClick={_onMinusClick}
             />
+            {prefix && <span className="prefix">{prefix}</span>}
             <span className="value">{valueState}</span>
+            {suffix && <span className="suffix">{suffix}</span>}
             <Button
                 text={"+"}
                 size={size}
diff --git a/examples/web/react/components/button/button.css b/examples/web/react/components/button/button.css
index f3021512ba25640c487ed00f531e70418b748aed..67b45263526fd7fb20cc9ac9d4cf02ae6628441c 100644
--- a/examples/web/react/components/button/button.css
+++ b/examples/web/react/components/button/button.css
@@ -84,8 +84,8 @@
 }
 
 .button.simple > span {
-    vertical-align: middle;
     display: inline-block;
+    vertical-align: middle;
 }
 
 .button.simple.no-text > img {
diff --git a/examples/web/react/components/info/info.css b/examples/web/react/components/info/info.css
index 4d41c39e6ba16fbc597c35cb5289da0b1ffb8cbd..cf1924233a9aa1055ff043584ced54dac9431830 100644
--- a/examples/web/react/components/info/info.css
+++ b/examples/web/react/components/info/info.css
@@ -1,29 +1,29 @@
-.info {
-    font-size: 24px;
-    vertical-align: top;
-}
-
-.info > dt {
-    clear: both;
-    float: left;
-    margin-top: 12px;
-}
-
-.info > dt:first-of-type {
-    margin-top: 0px;
-}
-
-.info > dd {
-    float: right;
-    margin-top: 12px;
-}
-
-.info > dd:first-of-type {
-    margin-top: 0px;
-}
-
-.info::after {
-    clear: both;
-    content: '';
-    display: block;
-}
+.info {
+    font-size: 24px;
+    vertical-align: top;
+}
+
+.info > dt {
+    clear: both;
+    float: left;
+    margin-top: 12px;
+}
+
+.info > dt:first-of-type {
+    margin-top: 0px;
+}
+
+.info > dd {
+    float: right;
+    margin-top: 12px;
+}
+
+.info > dd:first-of-type {
+    margin-top: 0px;
+}
+
+.info::after {
+    clear: both;
+    content: '';
+    display: block;
+}