diff --git a/packages/dnb-eufemia/src/components/help-button/HelpButton.js b/packages/dnb-eufemia/src/components/help-button/HelpButton.js
deleted file mode 100644
index cac6357a0a5..00000000000
--- a/packages/dnb-eufemia/src/components/help-button/HelpButton.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Web HelpButton Component
- *
- */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { registerElement } from '../../shared/component-helper'
-import Context from '../../shared/Context'
-import Modal from '../modal/Modal'
-import HelpButtonInstance from './HelpButtonInstance'
-import Button from '../button/Button'
-
-export default class HelpButton extends React.PureComponent {
-  static contextType = Context
-  static tagName = 'dnb-help-button'
-
-  static propTypes = {
-    ...Button.propTypes,
-    icon: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.node,
-      PropTypes.func,
-    ]),
-    icon_position: PropTypes.oneOf(['left', 'right']),
-    modal_content: PropTypes.node,
-    modal_props: PropTypes.object,
-  }
-
-  static defaultProps = {
-    variant: 'secondary',
-    icon: null,
-    icon_position: 'left',
-    modal_content: null,
-    modal_props: null,
-  }
-
-  static enableWebComponent() {
-    registerElement(
-      HelpButton?.tagName,
-      HelpButton,
-      HelpButton.defaultProps
-    )
-  }
-
-  static getContent(props) {
-    if (props.modal_content) {
-      return props.modal_content
-    }
-    return typeof props.children === 'function'
-      ? props.children(props)
-      : props.children
-  }
-
-  render() {
-    const {
-      modal_content, // eslint-disable-line
-      children, // eslint-disable-line
-      modal_props,
-      ...params
-    } = this.props
-
-    const content = HelpButton.getContent(this.props)
-
-    if (params.icon === null) {
-      params.icon = 'question'
-    }
-
-    if (content) {
-      if (!params.title) {
-        params.title = this.context.getTranslation(
-          this.props
-        ).HelpButton.title
-      }
-
-      return (
-        <Modal trigger_attributes={params} {...modal_props}>
-          {content}
-        </Modal>
-      )
-    }
-
-    return <HelpButtonInstance {...params} />
-  }
-}
diff --git a/packages/dnb-eufemia/src/components/help-button/HelpButton.tsx b/packages/dnb-eufemia/src/components/help-button/HelpButton.tsx
new file mode 100644
index 00000000000..fc044549478
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/help-button/HelpButton.tsx
@@ -0,0 +1,62 @@
+/**
+ * Web HelpButton Component
+ *
+ */
+
+import React from 'react'
+import Context from '../../shared/Context'
+import Modal from '../modal/Modal'
+import HelpButtonInstance from './HelpButtonInstance'
+import { ButtonProps } from '../button/Button'
+import { ModalProps } from '../modal/types'
+import { usePropsWithContext } from '../../shared/hooks'
+
+const defaultProps = {
+  variant: 'secondary',
+  icon_position: 'left',
+}
+
+export type HelpButtonProps = {
+  modal_content?: React.ReactNode
+  modal_props?: ModalProps
+} & ButtonProps
+
+export default function HelpButton(localProps: HelpButtonProps) {
+  const getContent = (props: HelpButtonProps) => {
+    if (props.modal_content) {
+      return props.modal_content
+    }
+    return typeof props.children === 'function'
+      ? props.children(props)
+      : props.children
+  }
+
+  const context = React.useContext(Context)
+  const props = usePropsWithContext(localProps, defaultProps)
+  const content = getContent(props)
+
+  const {
+    modal_content, // eslint-disable-line
+    children, // eslint-disable-line
+    modal_props,
+    ...params
+  } = props
+
+  if (params.icon === null) {
+    params.icon = 'question'
+  }
+
+  if (content) {
+    if (!params.title) {
+      params.title = context.getTranslation(props).HelpButton.title
+    }
+
+    return (
+      <Modal trigger_attributes={params} {...modal_props}>
+        {content}
+      </Modal>
+    )
+  }
+
+  return <HelpButtonInstance {...params} />
+}
diff --git a/packages/dnb-eufemia/src/components/help-button/HelpButtonInstance.js b/packages/dnb-eufemia/src/components/help-button/HelpButtonInstance.js
deleted file mode 100644
index 27d7ff3e97b..00000000000
--- a/packages/dnb-eufemia/src/components/help-button/HelpButtonInstance.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * Web HelpButton Component
- *
- */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import {
-  convertJsxToString,
-  extendPropsWithContext,
-} from '../../shared/component-helper'
-import Context from '../../shared/Context'
-import {
-  spacingPropTypes,
-  createSpacingClasses,
-} from '../space/SpacingHelper'
-import Button, { buttonVariantPropType } from '../button/Button'
-
-export default class HelpButtonInstance extends React.PureComponent {
-  static contextType = Context
-
-  static propTypes = {
-    id: PropTypes.string,
-    ...buttonVariantPropType,
-    icon: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.node,
-      PropTypes.func,
-    ]),
-    icon_position: PropTypes.oneOf(['left', 'right']),
-    ...spacingPropTypes,
-    className: PropTypes.string,
-    class: PropTypes.string,
-  }
-
-  static defaultProps = {
-    id: null,
-    variant: 'secondary',
-    icon: null,
-    icon_position: 'left',
-    className: null,
-    class: null,
-  }
-
-  render() {
-    // use only the props from context, who are available here anyway
-    const props = extendPropsWithContext(
-      this.props,
-      HelpButtonInstance.defaultProps,
-      this.context.FormRow,
-      this.context.HelpButton
-    )
-
-    const {
-      size,
-      icon,
-      on_click,
-      className,
-      class: _className,
-      ...rest
-    } = props
-
-    const params = {
-      className: classnames(
-        'dnb-help-button',
-        createSpacingClasses(props),
-        className,
-        _className
-      ),
-      size,
-      icon,
-      ...rest,
-    }
-
-    const isPotensialHelpButton =
-      !params.text || params.variant === 'tertiary'
-
-    if (isPotensialHelpButton && !params.icon && params.icon !== false) {
-      params.icon = 'question'
-    }
-
-    const isHelpButton =
-      isPotensialHelpButton &&
-      ['question', 'information'].includes(String(params.icon))
-
-    if (isHelpButton) {
-      if (!params['aria-roledescription']) {
-        params['aria-roledescription'] = this.context.getTranslation(
-          this.props
-        ).HelpButton.aria_role
-      }
-    }
-
-    if (!params.text && !params['aria-label']) {
-      let ariaLabel = convertJsxToString(props.title || props.children)
-      if (!ariaLabel) {
-        ariaLabel = this.context.getTranslation(this.props).HelpButton
-          .title
-      }
-      params['aria-label'] = ariaLabel
-    }
-
-    if (icon === 'information' && !size) {
-      params.icon_size = 'medium'
-    }
-    if (params.title && !params.tooltip && params.tooltip !== false) {
-      params.tooltip = params.title
-    }
-    if (params.tooltip) {
-      params.title = null
-    }
-
-    return <Button on_click={on_click} {...params} />
-  }
-}
diff --git a/packages/dnb-eufemia/src/components/help-button/HelpButtonInstance.tsx b/packages/dnb-eufemia/src/components/help-button/HelpButtonInstance.tsx
new file mode 100644
index 00000000000..1b19db9f0c2
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/help-button/HelpButtonInstance.tsx
@@ -0,0 +1,90 @@
+/**
+ * Web HelpButton Component
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import {
+  convertJsxToString,
+  usePropsWithContext,
+} from '../../shared/component-helper'
+import Context from '../../shared/Context'
+import { createSpacingClasses } from '../space/SpacingHelper'
+import Button, { ButtonProps } from '../button/Button'
+
+const defaultProps = {
+  variant: 'secondary',
+  icon_position: 'left',
+}
+
+export default function HelpButtonInstance(localProps: ButtonProps) {
+  const context = React.useContext(Context)
+
+  // use only the props from context, who are available here anyway
+  const props = usePropsWithContext(
+    localProps,
+    defaultProps,
+    context.FormRow,
+    context.HelpButton
+  )
+
+  const {
+    size,
+    icon,
+    on_click,
+    className,
+    class: _className,
+    ...rest
+  } = props
+
+  const params = {
+    className: classnames(
+      'dnb-help-button',
+      createSpacingClasses(props),
+      className,
+      _className
+    ),
+    size,
+    icon,
+    ...rest,
+  }
+
+  const isPotentialHelpButton =
+    !params.text || params.variant === 'tertiary'
+
+  if (isPotentialHelpButton && !params.icon && params.icon !== false) {
+    params.icon = 'question'
+  }
+
+  const isHelpButton =
+    isPotentialHelpButton &&
+    ['question', 'information'].includes(String(params.icon))
+
+  if (isHelpButton) {
+    if (!params['aria-roledescription']) {
+      params['aria-roledescription'] =
+        context.getTranslation(props).HelpButton.aria_role
+    }
+  }
+
+  if (!params.text && !params['aria-label']) {
+    let ariaLabel = convertJsxToString(props.title || props.children)
+    if (!ariaLabel) {
+      ariaLabel = context.getTranslation(props).HelpButton.title
+    }
+    params['aria-label'] = ariaLabel
+  }
+
+  if (icon === 'information' && !size) {
+    params.icon_size = 'medium'
+  }
+  if (params.title && !params.tooltip && params.tooltip !== false) {
+    params.tooltip = params.title
+  }
+  if (params.tooltip) {
+    params.title = null
+  }
+
+  return <Button on_click={on_click} {...params} />
+}
diff --git a/packages/dnb-eufemia/src/components/help-button/__tests__/HelpButton.test.js b/packages/dnb-eufemia/src/components/help-button/__tests__/HelpButton.test.tsx
similarity index 94%
rename from packages/dnb-eufemia/src/components/help-button/__tests__/HelpButton.test.js
rename to packages/dnb-eufemia/src/components/help-button/__tests__/HelpButton.test.tsx
index 91acd196951..f8f33e7162b 100644
--- a/packages/dnb-eufemia/src/components/help-button/__tests__/HelpButton.test.js
+++ b/packages/dnb-eufemia/src/components/help-button/__tests__/HelpButton.test.tsx
@@ -8,31 +8,26 @@ import {
   mount,
   fakeProps,
   axeComponent,
-  toJson,
   loadScss,
 } from '../../../core/jest/jestSetup'
-import Component from '../HelpButton'
+import Component, { HelpButtonProps } from '../HelpButton'
 import {
   question as QuestionIcon,
   information_medium as InformationIcon,
 } from '../../../icons'
+import { ModalProps } from '../../modal/types'
 
 const snapshotProps = fakeProps(require.resolve('../HelpButton'), {})
 snapshotProps.id = 'help-button'
 
-const modal_props = {}
+const modal_props: ModalProps = {}
 modal_props.content_id = null
 modal_props.no_animation = true
 
-const props = { modal_props }
+const props: HelpButtonProps = { modal_props }
 props.id = 'help-button'
 
 describe('HelpButton component', () => {
-  it('have to match snapshot', () => {
-    const Comp = mount(<Component {...snapshotProps} />)
-    expect(toJson(Comp)).toMatchSnapshot()
-  })
-
   it('should have question icon by default', () => {
     const Comp = mount(<Component {...props} />)
     expect(
diff --git a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.js.snap b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
similarity index 79%
rename from packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.js.snap
rename to packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
index 8964f05f5f7..5bfe1a3978b 100644
--- a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.js.snap
+++ b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
@@ -1,182 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HelpButton component have to match snapshot 1`] = `
-<HelpButton
-  icon={null}
-  icon_position="left"
-  id="help-button"
-  modal_content={null}
-  modal_props={null}
-  variant="secondary"
->
-  <HelpButtonInstance
-    class={null}
-    className={null}
-    icon="question"
-    icon_position="left"
-    id="help-button"
-    variant="secondary"
-  >
-    <Button
-      aria-label="Hjelpetekst"
-      aria-roledescription="Hjelp-knapp"
-      bounding={null}
-      class={null}
-      className="dnb-help-button"
-      custom_content={null}
-      custom_element={null}
-      custom_method={null}
-      disabled={null}
-      element={null}
-      global_status_id={null}
-      href={null}
-      icon="question"
-      icon_position="left"
-      icon_size={null}
-      id="help-button"
-      innerRef={null}
-      inner_ref={null}
-      on_click={null}
-      size={null}
-      skeleton={null}
-      status={null}
-      status_no_animation={null}
-      status_props={null}
-      status_state="error"
-      stretch={null}
-      text={null}
-      title={null}
-      to={null}
-      tooltip={null}
-      type={null}
-      variant="secondary"
-      wrap={null}
-    >
-      <button
-        aria-label="Hjelpetekst"
-        aria-roledescription="Hjelp-knapp"
-        className="dnb-button dnb-button--secondary dnb-help-button dnb-button--icon-position-left dnb-button--has-icon dnb-button--size-medium"
-        disabled={false}
-        id="help-button"
-        type="button"
-      >
-        <Content
-          aria-label="Hjelpetekst"
-          aria-roledescription="Hjelp-knapp"
-          bounding={null}
-          class={null}
-          className="dnb-help-button"
-          content={null}
-          custom_content={null}
-          custom_element={null}
-          custom_method={null}
-          disabled={null}
-          element={null}
-          global_status_id={null}
-          href={null}
-          icon="question"
-          icon_position="left"
-          icon_size={null}
-          id="help-button"
-          innerRef={null}
-          inner_ref={null}
-          isIconOnly={true}
-          on_click={null}
-          size={null}
-          skeleton={false}
-          status={null}
-          status_no_animation={null}
-          status_props={null}
-          status_state="error"
-          stretch={null}
-          text={null}
-          title={null}
-          to={null}
-          tooltip={null}
-          type={null}
-          variant="secondary"
-          wrap={null}
-        >
-          <span
-            aria-hidden={true}
-            className="dnb-button__alignment"
-            key="button-alignment"
-          >
-            ‌
-          </span>
-          <IconPrimary
-            alt={null}
-            aria-hidden={null}
-            attributes={null}
-            border={null}
-            className="dnb-button__icon"
-            color={null}
-            height={null}
-            icon="question"
-            inherit_color={true}
-            key="button-icon"
-            modifier={null}
-            size={null}
-            skeleton={false}
-            title={null}
-            width={null}
-          >
-            <span
-              aria-hidden={true}
-              className="dnb-icon dnb-icon--default dnb-button__icon dnb-icon--inherit-color"
-              data-test-id="question icon"
-              role="presentation"
-            >
-              <question>
-                <svg
-                  fill="none"
-                  height={16}
-                  viewBox="0 0 16 16"
-                  width={16}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M5.392 4.875c0-1.642 1.452-2.98 3.074-2.868 1.638.113 2.874 1.654 2.65 3.264a2.923 2.923 0 0 1-1.89 2.316c-1.216.43-.958 1.9-.958 2.913m-.177 3.004h.346m.079 0c0 .184-.16.244-.248.244-.092 0-.252-.06-.252-.244 0-.197.16-.256.252-.256.088 0 .248.06.248.256Z"
-                    stroke="#000"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                  />
-                </svg>
-              </question>
-            </span>
-          </IconPrimary>
-        </Content>
-      </button>
-      <FormStatus
-        attributes={null}
-        class={null}
-        className={null}
-        global_status_id={null}
-        icon="error"
-        icon_size="medium"
-        id="help-button-form-status"
-        label={null}
-        no_animation={null}
-        role={null}
-        show={null}
-        size="default"
-        skeleton={null}
-        state="error"
-        status="error"
-        stretch={null}
-        text={null}
-        text_id="help-button-status"
-        title={null}
-        variant={null}
-        width_element={null}
-        width_selector={null}
-      />
-    </Button>
-  </HelpButtonInstance>
-</HelpButton>
-`;
-
 exports[`HelpButton scss have to match default theme snapshot 1`] = `
 "/*
  * Np theme is provided
diff --git a/packages/dnb-eufemia/src/components/help-button/stories/HelpButton.stories.js b/packages/dnb-eufemia/src/components/help-button/stories/HelpButton.stories.tsx
similarity index 99%
rename from packages/dnb-eufemia/src/components/help-button/stories/HelpButton.stories.js
rename to packages/dnb-eufemia/src/components/help-button/stories/HelpButton.stories.tsx
index 4c6685df5aa..553ec799cda 100644
--- a/packages/dnb-eufemia/src/components/help-button/stories/HelpButton.stories.js
+++ b/packages/dnb-eufemia/src/components/help-button/stories/HelpButton.stories.tsx
@@ -6,7 +6,7 @@
 import React from 'react'
 import { Wrapper, Box } from 'storybook-utils/helpers'
 
-import { HelpButton, Modal, Button, Section, Input } from '../../'
+import { HelpButton, Modal, Button, Section, Input } from '../..'
 
 export default {
   title: 'Eufemia/Components/HelpButton',
diff --git a/packages/dnb-eufemia/src/components/modal/Modal.tsx b/packages/dnb-eufemia/src/components/modal/Modal.tsx
index 2dacfd3cd96..ff3757fa195 100644
--- a/packages/dnb-eufemia/src/components/modal/Modal.tsx
+++ b/packages/dnb-eufemia/src/components/modal/Modal.tsx
@@ -32,6 +32,7 @@ import {
   classWithCamelCaseProps,
   ToCamelCasePartial,
 } from '../../shared/helpers/withCamelCaseProps'
+import { ButtonProps } from '../button/Button'
 
 export const ANIMATION_DURATION = 300
 
@@ -464,7 +465,7 @@ class Modal extends React.PureComponent<
         icon_position: trigger_icon_position,
         class: trigger_class,
         ...trigger_attributes,
-      }
+      } as ButtonProps
       if (isTrue(disabled)) {
         triggerAttributes.disabled = true
       }
@@ -487,17 +488,17 @@ class Modal extends React.PureComponent<
         ? (trigger as React.FC)
         : HelpButtonInstance
 
+      const title = (
+        !triggerAttributes.text ? rest.title || fallbackTitle : null
+      ) as string
+
       return (
         <>
           {TriggerButton && !isTrue(omit_trigger_button) && (
             <TriggerButton
               {...triggerAttributes}
               id={this._id}
-              title={
-                !triggerAttributes.text
-                  ? rest.title || fallbackTitle
-                  : null
-              }
+              title={title}
               onClick={this.toggleOpenClose}
               innerRef={this._triggerRef}
               className={classnames(