diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2c20a371..5f8811c80 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,11 +8,51 @@
 
 ### Removed
 
-## [23.0.0] - 2023-10-30
-
-### Removed
-
-- `Tooltip`: removed `horizontal` and `vertical` positions from the `tooltipPosition` options. Tooltips will still render to the opposite side in case there is not enough space on the chosen position. ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2796](https://github.com/teamleadercrm/ui/pull/2796)`
+## [23.1.0] - 2023-11-06
+
+### Changed
+
+- `WysiwygEditor`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ValidationText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `WarningText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `SuccessText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `HelpText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ErrorText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Monospaced`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Marker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Toggle`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ToastContainer`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Toast`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Tag`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `TabGroup`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `SplitButton`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `RadioButton`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ProgressTracker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Pagination`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `OverviewPage`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Message`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingHeading2`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingHeading1`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingMarker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingLockBadge`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingButtonGroup`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `LoadingBar`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `LabelValuePair`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Island`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `GridItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `EmptyState`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DetailPage`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DatePicker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DataGrid`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Counter`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Container`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Banner`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `AdvancedCollapsible`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingStatusLabel`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MenuItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingMenuItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Label`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Bullet`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
 
 ## [23.0.1] - 2023-10-30
 
@@ -20,6 +60,12 @@
 
 - `Tooltip`: added missing `data-teamleader-ui="tooltip"` attribute ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2799](https://github.com/teamleadercrm/ui/pull/2799)`
 
+## [23.0.0] - 2023-10-30
+
+### Removed
+
+- `Tooltip`: removed `horizontal` and `vertical` positions from the `tooltipPosition` options. Tooltips will still render to the opposite side in case there is not enough space on the chosen position. ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2796](https://github.com/teamleadercrm/ui/pull/2796)`
+
 ## [22.3.5] - 2023-10-18
 
 ### Fixed
diff --git a/package.json b/package.json
index d4130c854..f15baebe6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "23.0.1",
+  "version": "23.1.0",
   "author": "Teamleader <development@teamleader.eu>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"
diff --git a/src/components/advancedCollapsible/AdvancedCollapsible.tsx b/src/components/advancedCollapsible/AdvancedCollapsible.tsx
index 1a3d26ff4..ef52a6a2a 100644
--- a/src/components/advancedCollapsible/AdvancedCollapsible.tsx
+++ b/src/components/advancedCollapsible/AdvancedCollapsible.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, forwardRef, useState } from 'react';
 import { TextBody, Heading3 } from '../typography';
 import Icon from '../icon';
 import Box, { pickBoxProps } from '../box';
@@ -26,46 +26,47 @@ export interface AdvancedCollapsibleProps extends Omit<BoxProps, 'size'> {
   onChange?: (collapsed: boolean, event: React.MouseEvent) => void;
 }
 
-const AdvancedCollapsible: GenericComponent<AdvancedCollapsibleProps> = ({
-  children,
-  color = 'teal',
-  indent = true,
-  size = 'medium',
-  title,
-  defaultIsCollapsed = true,
-  onChange,
-  ...others
-}) => {
-  const [collapsed, setCollapsed] = useState(defaultIsCollapsed);
+const AdvancedCollapsible: GenericComponent<AdvancedCollapsibleProps> = forwardRef<
+  HTMLDivElement,
+  AdvancedCollapsibleProps
+>(
+  (
+    { children, color = 'teal', indent = true, size = 'medium', title, defaultIsCollapsed = true, onChange, ...others },
+    ref,
+  ) => {
+    const [collapsed, setCollapsed] = useState(defaultIsCollapsed);
 
-  const boxProps = pickBoxProps(others);
-  const TitleElement = size === 'large' ? Heading3 : TextBody;
+    const boxProps = pickBoxProps(others);
+    const TitleElement = size === 'large' ? Heading3 : TextBody;
 
-  const handleTitleClick = (event: React.MouseEvent) => {
-    if (onChange) {
-      onChange(!collapsed, event);
-    }
+    const handleTitleClick = (event: React.MouseEvent) => {
+      if (onChange) {
+        onChange(!collapsed, event);
+      }
 
-    setCollapsed(!collapsed);
-  };
+      setCollapsed(!collapsed);
+    };
 
-  return (
-    <Box data-teamleader-ui="advanced-collapsible">
-      <Box className={theme['title']} display="flex" alignItems="center" onClick={handleTitleClick} {...boxProps}>
-        <Icon color={color} tint="darkest">
-          {collapsed ? <IconChevronRightSmallOutline /> : <IconChevronDownSmallOutline />}
-        </Icon>
-        <TitleElement color={color} marginLeft={2} tint="darkest">
-          {size === 'medium' ? <strong>{title}</strong> : title}
-        </TitleElement>
-      </Box>
-      {!collapsed && (
-        <Box {...(indent && { className: theme['children-indent'] })} marginTop={2}>
-          {children}
+    return (
+      <Box data-teamleader-ui="advanced-collapsible" ref={ref}>
+        <Box className={theme['title']} display="flex" alignItems="center" onClick={handleTitleClick} {...boxProps}>
+          <Icon color={color} tint="darkest">
+            {collapsed ? <IconChevronRightSmallOutline /> : <IconChevronDownSmallOutline />}
+          </Icon>
+          <TitleElement color={color} marginLeft={2} tint="darkest">
+            {size === 'medium' ? <strong>{title}</strong> : title}
+          </TitleElement>
         </Box>
-      )}
-    </Box>
-  );
-};
+        {!collapsed && (
+          <Box {...(indent && { className: theme['children-indent'] })} marginTop={2}>
+            {children}
+          </Box>
+        )}
+      </Box>
+    );
+  },
+);
+
+AdvancedCollapsible.displayName = 'AdvancedCollapsible';
 
 export default AdvancedCollapsible;
diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
index fdb49c52f..79548bde0 100644
--- a/src/components/banner/Banner.tsx
+++ b/src/components/banner/Banner.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import cx from 'classnames';
 
 import Box, { BoxProps, Padding } from '../box';
@@ -30,43 +30,42 @@ export interface BannerProps extends Omit<BoxProps, 'size'> {
   size?: Exclude<(typeof SIZES)[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
 }
 
-const Banner = ({
-  children,
-  className,
-  color = 'white',
-  size = 'medium',
-  icon,
-  onClose,
-  fullWidth,
-  ...others
-}: BannerProps) => {
-  const classNames = cx(className, theme[color], theme['banner'], { [theme['banner_full-width']]: fullWidth });
+const Banner = forwardRef<HTMLElement, BannerProps>(
+  (
+    { children, className, color = 'white', size = 'medium', icon, onClose, fullWidth, ...others }: BannerProps,
+    ref,
+  ) => {
+    const classNames = cx(className, theme[color], theme['banner'], { [theme['banner_full-width']]: fullWidth });
 
-  return (
-    <Box
-      data-teamleader-ui="banner"
-      className={classNames}
-      color={color}
-      padding={PADDINGS[size]}
-      borderRadius={fullWidth ? 'square' : 'rounded'}
-      {...others}
-    >
-      <div className={theme['inner']}>
-        {icon && <span className={theme['icon']}>{icon}</span>}
-        <Box flex={1} element="span" paddingRight={onClose && 7}>
-          {children}
-        </Box>
-        {onClose && (
-          <IconButton
-            className={theme['close-button']}
-            icon={<IconCloseMediumOutline />}
-            color={color === 'white' ? 'neutral' : color}
-            onClick={onClose}
-          />
-        )}
-      </div>
-    </Box>
-  );
-};
+    return (
+      <Box
+        data-teamleader-ui="banner"
+        className={classNames}
+        color={color}
+        padding={PADDINGS[size]}
+        borderRadius={fullWidth ? 'square' : 'rounded'}
+        {...others}
+        ref={ref}
+      >
+        <div className={theme['inner']}>
+          {icon && <span className={theme['icon']}>{icon}</span>}
+          <Box flex={1} element="span" paddingRight={onClose && 7}>
+            {children}
+          </Box>
+          {onClose && (
+            <IconButton
+              className={theme['close-button']}
+              icon={<IconCloseMediumOutline />}
+              color={color === 'white' ? 'neutral' : color}
+              onClick={onClose}
+            />
+          )}
+        </div>
+      </Box>
+    );
+  },
+);
+
+Banner.displayName = 'Banner';
 
 export default Banner;
diff --git a/src/components/bullet/Bullet.tsx b/src/components/bullet/Bullet.tsx
index c7107c7de..781b369f7 100644
--- a/src/components/bullet/Bullet.tsx
+++ b/src/components/bullet/Bullet.tsx
@@ -1,9 +1,10 @@
-import React, { PureComponent } from 'react';
+import React, { forwardRef } from 'react';
 import Box from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
 import { BoxProps } from '../box/Box';
 import { COLORS, SIZES, TINTS } from '../../constants';
+import { GenericComponent } from '../../@types/types';
 
 export interface BulletProps extends Omit<BoxProps, 'size' | 'ref'> {
   /** A border color to give to the counter */
@@ -18,9 +19,8 @@ export interface BulletProps extends Omit<BoxProps, 'size' | 'ref'> {
   size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
-class Bullet extends PureComponent<BulletProps> {
-  render() {
-    const { className, color = 'neutral', size = 'medium', borderColor, borderTint, ...others } = this.props;
+const Bullet: GenericComponent<BulletProps> = forwardRef<HTMLElement, BulletProps>(
+  ({ className, color = 'neutral', size = 'medium', borderColor, borderTint, ...others }, ref) => {
     const classNames = cx(
       theme['bullet'],
       theme[color],
@@ -32,8 +32,10 @@ class Bullet extends PureComponent<BulletProps> {
       className,
     );
 
-    return <Box data-teamleader-ui="bullet" className={classNames} element="span" {...others} />;
-  }
-}
+    return <Box data-teamleader-ui="bullet" className={classNames} element="span" ref={ref} {...others} />;
+  },
+);
+
+Bullet.displayName = 'Bullet';
 
 export default Bullet;
diff --git a/src/components/container/Container.tsx b/src/components/container/Container.tsx
index 00e1b775b..0259da3e3 100644
--- a/src/components/container/Container.tsx
+++ b/src/components/container/Container.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import Box from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
@@ -11,20 +11,24 @@ export interface ContainerProps extends Omit<BoxProps, 'ref'> {
   fixed?: boolean;
 }
 
-const Container: GenericComponent<ContainerProps> = ({ children, className, fixed, ...others }) => {
-  const classNames = cx(
-    theme['container'],
-    {
-      [theme['is-fixed']]: fixed,
-    },
-    className,
-  );
+const Container: GenericComponent<ContainerProps> = forwardRef<HTMLElement, ContainerProps>(
+  ({ children, className, fixed, ...others }, ref) => {
+    const classNames = cx(
+      theme['container'],
+      {
+        [theme['is-fixed']]: fixed,
+      },
+      className,
+    );
 
-  return (
-    <Box data-teamleader-ui="container" {...others} boxSizing="content-box" className={classNames}>
-      {children}
-    </Box>
-  );
-};
+    return (
+      <Box data-teamleader-ui="container" {...others} boxSizing="content-box" className={classNames} ref={ref}>
+        {children}
+      </Box>
+    );
+  },
+);
+
+Container.displayName = 'Container';
 
 export default Container;
diff --git a/src/components/counter/Counter.tsx b/src/components/counter/Counter.tsx
index bb24b770d..46f508556 100644
--- a/src/components/counter/Counter.tsx
+++ b/src/components/counter/Counter.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import Box from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
@@ -27,34 +27,31 @@ export interface CounterProps extends Omit<BoxProps, 'size' | 'ref'> {
   size: 'small' | 'medium';
 }
 
-const Counter: GenericComponent<CounterProps> = ({
-  children,
-  className,
-  color = 'neutral',
-  count,
-  maxCount,
-  size = 'medium',
-  borderColor,
-  borderTint,
-  ...others
-}) => {
-  const classNames = cx(
-    uiUtilities['reset-font-smoothing'],
-    theme['counter'],
-    theme[color],
-    theme[size],
-    {
-      [theme[`border-${borderColor}-${borderTint}`]]: borderColor && borderTint,
-      [theme[`border-${borderColor}`]]: borderColor && !borderTint,
-    },
-    className,
-  );
+const Counter: GenericComponent<CounterProps> = forwardRef<HTMLElement, CounterProps>(
+  (
+    { children, className, color = 'neutral', count, maxCount, size = 'medium', borderColor, borderTint, ...others },
+    ref,
+  ) => {
+    const classNames = cx(
+      uiUtilities['reset-font-smoothing'],
+      theme['counter'],
+      theme[color],
+      theme[size],
+      {
+        [theme[`border-${borderColor}-${borderTint}`]]: borderColor && borderTint,
+        [theme[`border-${borderColor}`]]: borderColor && !borderTint,
+      },
+      className,
+    );
 
-  return (
-    <Box className={classNames} element="span" {...others} data-teamleader-ui="counter">
-      <Monospaced>{count > maxCount ? `${maxCount}+` : count}</Monospaced> {children}
-    </Box>
-  );
-};
+    return (
+      <Box className={classNames} element="span" {...others} data-teamleader-ui="counter" ref={ref}>
+        <Monospaced>{count > maxCount ? `${maxCount}+` : count}</Monospaced> {children}
+      </Box>
+    );
+  },
+);
+
+Counter.displayName = 'Counter';
 
 export default Counter;
diff --git a/src/components/datagrid/Cell.tsx b/src/components/datagrid/Cell.tsx
index 289743211..b8477993c 100644
--- a/src/components/datagrid/Cell.tsx
+++ b/src/components/datagrid/Cell.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, ReactNode } from 'react';
+import React, { MouseEventHandler, ReactNode, forwardRef } from 'react';
 import Box from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
@@ -29,38 +29,43 @@ export interface CellProps extends Omit<BoxProps, 'backgroundColor'> {
   onClick?: MouseEventHandler<HTMLElement>;
 }
 
-const Cell: GenericComponent<CellProps> = ({
-  align = 'left',
-  backgroundColor,
-  border,
-  children,
-  className,
-  flex = 1,
-  preventOverflow = true,
-  soft = false,
-  strong = false,
-  ...others
-}) => {
-  const classNames = cx(
-    uiUtilities['reset-font-smoothing'],
-    theme['cell'],
-    theme[`align-${align}`],
-    theme[`flex-${flex}`],
-    theme[`has-background-${backgroundColor}`],
-    theme[`has-border-${border}`],
+const Cell: GenericComponent<CellProps> = forwardRef<HTMLElement, CellProps>(
+  (
     {
-      [theme['is-soft']]: soft,
-      [theme['is-strong']]: strong,
+      align = 'left',
+      backgroundColor,
+      border,
+      children,
+      className,
+      flex = 1,
+      preventOverflow = true,
+      soft = false,
+      strong = false,
+      ...others
     },
-    className,
-  );
+    ref,
+  ) => {
+    const classNames = cx(
+      uiUtilities['reset-font-smoothing'],
+      theme['cell'],
+      theme[`align-${align}`],
+      theme[`flex-${flex}`],
+      theme[`has-background-${backgroundColor}`],
+      theme[`has-border-${border}`],
+      {
+        [theme['is-soft']]: soft,
+        [theme['is-strong']]: strong,
+      },
+      className,
+    );
 
-  return (
-    <Box className={classNames} data-teamleader-ui="datagrid-cell" boxSizing="content-box" {...others}>
-      {preventOverflow ? <div className={theme['has-overflow-prevention']}>{children}</div> : children}
-    </Box>
-  );
-};
+    return (
+      <Box className={classNames} data-teamleader-ui="datagrid-cell" boxSizing="content-box" {...others} ref={ref}>
+        {preventOverflow ? <div className={theme['has-overflow-prevention']}>{children}</div> : children}
+      </Box>
+    );
+  },
+);
 Cell.displayName = 'DataGrid.Cell';
 
 export default Cell;
diff --git a/src/components/datagrid/DataGrid.tsx b/src/components/datagrid/DataGrid.tsx
index f2c064991..80e203d2e 100644
--- a/src/components/datagrid/DataGrid.tsx
+++ b/src/components/datagrid/DataGrid.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import omit from 'lodash.omit';
-import React, { ChangeEvent, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import React, { ChangeEvent, ReactElement, ReactNode, forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import ReactResizeDetector from 'react-resize-detector';
 import { GenericComponent } from '../../@types/types';
 import Box from '../box';
@@ -17,7 +17,7 @@ import HeaderRow, { HeaderRowProps } from './HeaderRow';
 import HeaderRowOverlay, { HeaderRowOverlayProps } from './HeaderRowOverlay/HeaderRowOverlay';
 import theme from './theme.css';
 
-export interface DataGridProps extends Omit<BoxProps, 'children' | 'className'> {
+export interface DataGridProps extends Omit<BoxProps, 'children' | 'className' | 'ref'> {
   /** If true, datagrid will have a border and rounded corners. */
   bordered?: boolean;
   /** The content to display inside the data grid. */
@@ -47,229 +47,237 @@ interface DatagridComponent extends GenericComponent<DataGridProps> {
   FooterRow: GenericComponent<FooterRowProps>;
 }
 
-export const DataGrid: DatagridComponent = ({
-  bordered = false,
-  children,
-  className,
-  processing = false,
-  comparableId,
-  selectable,
-  stickyFromLeft = 0,
-  stickyFromRight = 0,
-  onSelectionChange,
-  ...others
-}) => {
-  const [hoveredRow, setHoveredRow] = useState<React.Key | null>(null);
-  const [isOverflowing, setOverflowing] = useState(false);
-  const [selectedRows, setSelectedRows] = useState<React.Key[]>([]);
-  const scrollableNode = useRef<HTMLDivElement>(null);
-  const [rowNodes, setRowNodes] = useState<Map<number, HTMLElement>>(new Map());
-  const totalRowChildrenWidth = useMemo(
-    () =>
-      Array.from(rowNodes.values())
-        .filter((rowDOMNode) => rowDOMNode.children)
-        .map((rowDOMNode) =>
-          Array.from(rowDOMNode.children)
-            .map((child) => child.clientWidth)
-            .reduce((accumulatedChildWidth, currentChildWidth) => accumulatedChildWidth + currentChildWidth, 0),
-        )
-        .reduce((maxRowWidth, currentRowWidth) => (currentRowWidth > maxRowWidth ? currentRowWidth : maxRowWidth), 0),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [rowNodes, rowNodes.size],
-  );
-  const childrenArray: (ReactElement | ReactElement[])[] = !Array.isArray(children) ? [children] : children;
-  const bodyRowCount = (childrenArray.find((child) => Array.isArray(child)) as ReactElement[] | undefined)?.length;
-
-  const handleSelectionChange = (selection: React.Key[], event: ChangeEvent | null = null) => {
-    if (onSelectionChange) {
-      onSelectionChange(selection, event);
-    }
-  };
+export const DataGrid: GenericComponent<DataGridProps> = forwardRef<HTMLElement, DataGridProps>(
+  (
+    {
+      bordered = false,
+      children,
+      className,
+      processing = false,
+      comparableId,
+      selectable,
+      stickyFromLeft = 0,
+      stickyFromRight = 0,
+      onSelectionChange,
+      ...others
+    },
+    ref,
+  ) => {
+    const [hoveredRow, setHoveredRow] = useState<React.Key | null>(null);
+    const [isOverflowing, setOverflowing] = useState(false);
+    const [selectedRows, setSelectedRows] = useState<React.Key[]>([]);
+    const scrollableNode = useRef<HTMLDivElement>(null);
+    const [rowNodes, setRowNodes] = useState<Map<number, HTMLElement>>(new Map());
+    const totalRowChildrenWidth = useMemo(
+      () =>
+        Array.from(rowNodes.values())
+          .filter((rowDOMNode) => rowDOMNode.children)
+          .map((rowDOMNode) =>
+            Array.from(rowDOMNode.children)
+              .map((child) => child.clientWidth)
+              .reduce((accumulatedChildWidth, currentChildWidth) => accumulatedChildWidth + currentChildWidth, 0),
+          )
+          .reduce((maxRowWidth, currentRowWidth) => (currentRowWidth > maxRowWidth ? currentRowWidth : maxRowWidth), 0),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [rowNodes, rowNodes.size],
+    );
+    const childrenArray: (ReactElement | ReactElement[])[] = !Array.isArray(children) ? [children] : children;
+    const bodyRowCount = (childrenArray.find((child) => Array.isArray(child)) as ReactElement[] | undefined)?.length;
 
-  const handleHeaderRowSelectionChange = (checked: boolean, event: ChangeEvent) => {
-    const allBodyRowIndexes = React.Children.map(children, (child) => {
-      if (isReactElement(child) && isComponentOfType(BodyRow, child)) {
-        return child.key;
+    const handleSelectionChange = (selection: React.Key[], event: ChangeEvent | null = null) => {
+      if (onSelectionChange) {
+        onSelectionChange(selection, event);
       }
-    });
+    };
 
-    const selectedBodyRowIndexes = checked ? allBodyRowIndexes ?? [] : [];
-    setSelectedRows(selectedBodyRowIndexes);
-    handleSelectionChange(selectedBodyRowIndexes, event);
-  };
+    const handleHeaderRowSelectionChange = (checked: boolean, event: ChangeEvent) => {
+      const allBodyRowIndexes = React.Children.map(children, (child) => {
+        if (isReactElement(child) && isComponentOfType(BodyRow, child)) {
+          return child.key;
+        }
+      });
 
-  const handleBodyRowMouseEnter = (row: ReactElement, event: MouseEvent) => {
-    const { onClick, onMouseOver } = row.props;
+      const selectedBodyRowIndexes = checked ? allBodyRowIndexes ?? [] : [];
+      setSelectedRows(selectedBodyRowIndexes);
+      handleSelectionChange(selectedBodyRowIndexes, event);
+    };
 
-    onClick && setHoveredRow(row.key);
-    onMouseOver && onMouseOver(event);
-  };
+    const handleBodyRowMouseEnter = (row: ReactElement, event: MouseEvent) => {
+      const { onClick, onMouseOver } = row.props;
 
-  const handleBodyRowMouseLeave = (row: ReactElement, event: MouseEvent) => {
-    const { onClick, onMouseOut } = row.props;
+      onClick && setHoveredRow(row.key);
+      onMouseOver && onMouseOver(event);
+    };
 
-    onClick && setHoveredRow(null);
-    onMouseOut && onMouseOut(event);
-  };
+    const handleBodyRowMouseLeave = (row: ReactElement, event: MouseEvent) => {
+      const { onClick, onMouseOut } = row.props;
 
-  const handleBodyRowSelectionChange = (rowIndex: React.Key | null, event: ChangeEvent) => {
-    if (rowIndex === null) {
-      return;
-    }
+      onClick && setHoveredRow(null);
+      onMouseOut && onMouseOut(event);
+    };
 
-    const rows = selectedRows.includes(rowIndex)
-      ? selectedRows.filter((row) => row !== rowIndex)
-      : [...selectedRows, rowIndex];
+    const handleBodyRowSelectionChange = (rowIndex: React.Key | null, event: ChangeEvent) => {
+      if (rowIndex === null) {
+        return;
+      }
 
-    setSelectedRows(rows);
-    handleSelectionChange(rows, event);
-  };
+      const rows = selectedRows.includes(rowIndex)
+        ? selectedRows.filter((row) => row !== rowIndex)
+        : [...selectedRows, rowIndex];
 
-  const handleResize = () => {
-    if (isElementOverflowingX(scrollableNode.current)) {
-      setOverflowing(true);
-    } else {
-      setOverflowing(false);
-    }
-  };
+      setSelectedRows(rows);
+      handleSelectionChange(rows, event);
+    };
 
-  useEffect(() => {
-    handleResize();
-  });
+    const handleResize = () => {
+      if (isElementOverflowingX(scrollableNode.current)) {
+        setOverflowing(true);
+      } else {
+        setOverflowing(false);
+      }
+    };
 
-  useEffect(() => {
-    setSelectedRows([]);
-    handleSelectionChange([]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [comparableId]);
+    useEffect(() => {
+      handleResize();
+    });
 
-  const classNames = cx(
-    theme['data-grid'],
-    {
-      [theme['is-bordered']]: bordered,
-      [theme['is-overflowing']]: isOverflowing,
-    },
-    className,
-  );
+    useEffect(() => {
+      setSelectedRows([]);
+      handleSelectionChange([]);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [comparableId]);
 
-  const rest = omit(others, ['comparableId', 'onSelectionChange']);
+    const classNames = cx(
+      theme['data-grid'],
+      {
+        [theme['is-bordered']]: bordered,
+        [theme['is-overflowing']]: isOverflowing,
+      },
+      className,
+    );
 
-  const sectionLeftClassNames = cx(theme['section'], theme['is-sticky-left'], {
-    [theme['has-blend-right']]: selectable || stickyFromLeft > 0,
-    [theme['has-border-right']]: selectable || stickyFromLeft > 0,
-  });
+    const rest = omit(others, ['comparableId', 'onSelectionChange']);
 
-  return (
-    <Box data-teamleader-ui="data-grid" className={classNames} {...rest}>
-      {processing && (
-        <div className={cx(theme['loading-bar'])}>
-          <LoadingBar />
-        </div>
-      )}
-      {selectedRows.length > 0 &&
-        React.Children.map(children, (child) => {
-          if (isReactElement(child) && isComponentOfType(HeaderRowOverlay, child)) {
-            return React.cloneElement(child, {
-              numSelectedRows: selectedRows.length,
-            });
-          }
-        })}
-      <Box display="flex" className={cx(theme['section-wrapper'])}>
-        {(selectable || stickyFromLeft > 0) && (
-          <div className={sectionLeftClassNames}>
-            {React.Children.map(children, (child) => {
-              if (isReactElement(child)) {
-                if (isComponentOfType(HeaderRow, child)) {
-                  return React.cloneElement(child, {
-                    onSelectionChange: handleHeaderRowSelectionChange,
-                    selected: selectedRows.length === bodyRowCount,
-                    selectable,
-                    sliceTo: stickyFromLeft > 0 ? stickyFromLeft : 0,
-                  });
-                } else if (isComponentOfType(BodyRow, child)) {
-                  return React.cloneElement(child, {
-                    hovered: hoveredRow === child.key,
-                    onMouseEnter: (event: MouseEvent) => handleBodyRowMouseEnter(child, event),
-                    onMouseLeave: (event: MouseEvent) => handleBodyRowMouseLeave(child, event),
-                    onSelectionChange: (checked: boolean, event: ChangeEvent) =>
-                      handleBodyRowSelectionChange(child.key, event),
-                    selected: child.key ? selectedRows.indexOf(child.key) !== -1 : false,
-                    selectable,
-                    sliceTo: stickyFromLeft > 0 ? stickyFromLeft : 0,
-                  });
-                } else if (isComponentOfType(FooterRow, child)) {
-                  return React.cloneElement(child, {
-                    preserveSelectableSpace: selectable,
-                    sliceTo: stickyFromLeft > 0 ? stickyFromLeft : 0,
-                  });
-                }
-              }
-            })}
+    const sectionLeftClassNames = cx(theme['section'], theme['is-sticky-left'], {
+      [theme['has-blend-right']]: selectable || stickyFromLeft > 0,
+      [theme['has-border-right']]: selectable || stickyFromLeft > 0,
+    });
+
+    return (
+      <Box data-teamleader-ui="data-grid" className={classNames} {...rest} ref={ref}>
+        {processing && (
+          <div className={cx(theme['loading-bar'])}>
+            <LoadingBar />
           </div>
         )}
-        <div className={cx(theme['section'], theme['is-scrollable'])} ref={scrollableNode}>
-          {React.Children.map(children, (child, key) => {
-            if (isReactElement(child)) {
-              if (isComponentOfType(HeaderRow, child) || isComponentOfType(FooterRow, child)) {
-                return React.cloneElement(child, {
-                  sliceFrom: stickyFromLeft > 0 ? stickyFromLeft : 0,
-                  sliceTo: stickyFromRight > 0 ? -stickyFromRight : undefined,
-                  ref: (rowNode: HTMLElement | null) => rowNode && setRowNodes(rowNodes.set(key, rowNode)),
-                  style: isOverflowing
-                    ? {
-                        minWidth: `${totalRowChildrenWidth - 10}px`,
-                      }
-                    : undefined,
-                });
-              } else if (isComponentOfType(BodyRow, child)) {
-                return React.cloneElement(child, {
-                  hovered: hoveredRow === child.key,
-                  onMouseEnter: (event: MouseEvent) => handleBodyRowMouseEnter(child, event),
-                  onMouseLeave: (event: MouseEvent) => handleBodyRowMouseLeave(child, event),
-                  sliceFrom: stickyFromLeft > 0 ? stickyFromLeft : 0,
-                  sliceTo: stickyFromRight > 0 ? -stickyFromRight : undefined,
-                  ref: (rowNode: HTMLElement | null) => rowNode && setRowNodes(rowNodes.set(key, rowNode)),
-                  style: isOverflowing
-                    ? {
-                        minWidth: `${totalRowChildrenWidth - 10}px`,
-                      }
-                    : undefined,
-                });
-              }
+        {selectedRows.length > 0 &&
+          React.Children.map(children, (child) => {
+            if (isReactElement(child) && isComponentOfType(HeaderRowOverlay, child)) {
+              return React.cloneElement(child, {
+                numSelectedRows: selectedRows.length,
+              });
             }
           })}
-        </div>
-        {stickyFromRight > 0 && (
-          <div className={cx(theme['section'], theme['has-blend-left'])}>
-            {React.Children.map(children, (child) => {
+        <Box display="flex" className={cx(theme['section-wrapper'])}>
+          {(selectable || stickyFromLeft > 0) && (
+            <div className={sectionLeftClassNames}>
+              {React.Children.map(children, (child) => {
+                if (isReactElement(child)) {
+                  if (isComponentOfType(HeaderRow, child)) {
+                    return React.cloneElement(child, {
+                      onSelectionChange: handleHeaderRowSelectionChange,
+                      selected: selectedRows.length === bodyRowCount,
+                      selectable,
+                      sliceTo: stickyFromLeft > 0 ? stickyFromLeft : 0,
+                    });
+                  } else if (isComponentOfType(BodyRow, child)) {
+                    return React.cloneElement(child, {
+                      hovered: hoveredRow === child.key,
+                      onMouseEnter: (event: MouseEvent) => handleBodyRowMouseEnter(child, event),
+                      onMouseLeave: (event: MouseEvent) => handleBodyRowMouseLeave(child, event),
+                      onSelectionChange: (checked: boolean, event: ChangeEvent) =>
+                        handleBodyRowSelectionChange(child.key, event),
+                      selected: child.key ? selectedRows.indexOf(child.key) !== -1 : false,
+                      selectable,
+                      sliceTo: stickyFromLeft > 0 ? stickyFromLeft : 0,
+                    });
+                  } else if (isComponentOfType(FooterRow, child)) {
+                    return React.cloneElement(child, {
+                      preserveSelectableSpace: selectable,
+                      sliceTo: stickyFromLeft > 0 ? stickyFromLeft : 0,
+                    });
+                  }
+                }
+              })}
+            </div>
+          )}
+          <div className={cx(theme['section'], theme['is-scrollable'])} ref={scrollableNode}>
+            {React.Children.map(children, (child, key) => {
               if (isReactElement(child)) {
                 if (isComponentOfType(HeaderRow, child) || isComponentOfType(FooterRow, child)) {
-                  return React.cloneElement(child, { sliceFrom: -stickyFromRight });
+                  return React.cloneElement(child, {
+                    sliceFrom: stickyFromLeft > 0 ? stickyFromLeft : 0,
+                    sliceTo: stickyFromRight > 0 ? -stickyFromRight : undefined,
+                    ref: (rowNode: HTMLElement | null) => rowNode && setRowNodes(rowNodes.set(key, rowNode)),
+                    style: isOverflowing
+                      ? {
+                          minWidth: `${totalRowChildrenWidth - 10}px`,
+                        }
+                      : undefined,
+                  });
                 } else if (isComponentOfType(BodyRow, child)) {
                   return React.cloneElement(child, {
                     hovered: hoveredRow === child.key,
                     onMouseEnter: (event: MouseEvent) => handleBodyRowMouseEnter(child, event),
                     onMouseLeave: (event: MouseEvent) => handleBodyRowMouseLeave(child, event),
-                    sliceFrom: -stickyFromRight,
+                    sliceFrom: stickyFromLeft > 0 ? stickyFromLeft : 0,
+                    sliceTo: stickyFromRight > 0 ? -stickyFromRight : undefined,
+                    ref: (rowNode: HTMLElement | null) => rowNode && setRowNodes(rowNodes.set(key, rowNode)),
+                    style: isOverflowing
+                      ? {
+                          minWidth: `${totalRowChildrenWidth - 10}px`,
+                        }
+                      : undefined,
                   });
                 }
               }
             })}
           </div>
-        )}
+          {stickyFromRight > 0 && (
+            <div className={cx(theme['section'], theme['has-blend-left'])}>
+              {React.Children.map(children, (child) => {
+                if (isReactElement(child)) {
+                  if (isComponentOfType(HeaderRow, child) || isComponentOfType(FooterRow, child)) {
+                    return React.cloneElement(child, { sliceFrom: -stickyFromRight });
+                  } else if (isComponentOfType(BodyRow, child)) {
+                    return React.cloneElement(child, {
+                      hovered: hoveredRow === child.key,
+                      onMouseEnter: (event: MouseEvent) => handleBodyRowMouseEnter(child, event),
+                      onMouseLeave: (event: MouseEvent) => handleBodyRowMouseLeave(child, event),
+                      sliceFrom: -stickyFromRight,
+                    });
+                  }
+                }
+              })}
+            </div>
+          )}
+        </Box>
+        <ReactResizeDetector handleWidth onResize={handleResize} refreshMode="throttle" refreshRate={16} />
       </Box>
-      <ReactResizeDetector handleWidth onResize={handleResize} refreshMode="throttle" refreshRate={16} />
-    </Box>
-  );
-};
-
-DataGrid.HeaderRow = HeaderRow;
-DataGrid.HeaderRowOverlay = HeaderRowOverlay;
-DataGrid.HeaderCell = HeaderCell;
-DataGrid.BodyRow = BodyRow;
-DataGrid.Cell = Cell;
-DataGrid.FooterRow = FooterRow;
+    );
+  },
+);
 
 DataGrid.displayName = 'DataGrid';
 
-export default DataGrid;
+// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
+const DataGridWithSubComponents = DataGrid as DatagridComponent;
+
+DataGridWithSubComponents.HeaderRow = HeaderRow;
+DataGridWithSubComponents.HeaderRowOverlay = HeaderRowOverlay;
+DataGridWithSubComponents.HeaderCell = HeaderCell;
+DataGridWithSubComponents.BodyRow = BodyRow;
+DataGridWithSubComponents.Cell = Cell;
+DataGridWithSubComponents.FooterRow = FooterRow;
+
+export default DataGridWithSubComponents;
diff --git a/src/components/datagrid/HeaderCell.tsx b/src/components/datagrid/HeaderCell.tsx
index 2078b6979..334328df8 100644
--- a/src/components/datagrid/HeaderCell.tsx
+++ b/src/components/datagrid/HeaderCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import theme from './theme.css';
 import Cell, { CellProps } from './Cell';
 import Icon from '../icon';
@@ -14,46 +14,40 @@ export interface HeaderCellProps extends CellProps {
   sorted?: 'asc' | 'desc';
 }
 
-const HeaderCell: GenericComponent<HeaderCellProps> = ({
-  align = 'left',
-  children,
-  className,
-  onClick,
-  sortable,
-  sorted,
-  ...others
-}) => {
-  const renderSortedIndicators = () => {
-    if (sorted === 'asc' || (!sorted && sortable)) {
-      return <IconArrowUpSmallOutline />;
-    }
+const HeaderCell: GenericComponent<HeaderCellProps> = forwardRef<HTMLElement, HeaderCellProps>(
+  ({ align = 'left', children, className, onClick, sortable, sorted, ...others }, ref) => {
+    const renderSortedIndicators = () => {
+      if (sorted === 'asc' || (!sorted && sortable)) {
+        return <IconArrowUpSmallOutline />;
+      }
 
-    if (sorted === 'desc') {
-      return <IconArrowDownSmallOutline />;
-    }
+      if (sorted === 'desc') {
+        return <IconArrowDownSmallOutline />;
+      }
 
-    return null;
-  };
+      return null;
+    };
 
-  const classNames = cx(
-    theme['header-cell'],
-    {
-      [theme['is-sortable']]: sortable,
-      [theme['is-sorted']]: sorted === 'asc' || sorted === 'desc',
-    },
-    className,
-  );
+    const classNames = cx(
+      theme['header-cell'],
+      {
+        [theme['is-sortable']]: sortable,
+        [theme['is-sorted']]: sorted === 'asc' || sorted === 'desc',
+      },
+      className,
+    );
 
-  return (
-    <Cell align={align} className={classNames} onClick={onClick} {...others} preventOverflow={false}>
-      {sortable && align === 'right' && <Icon marginRight={1}>{renderSortedIndicators()}</Icon>}
-      <UITextBody element="span" maxLines={1}>
-        {children}
-      </UITextBody>
-      {sortable && align === 'left' && <Icon marginLeft={1}>{renderSortedIndicators()}</Icon>}
-    </Cell>
-  );
-};
+    return (
+      <Cell align={align} className={classNames} onClick={onClick} {...others} preventOverflow={false} ref={ref}>
+        {sortable && align === 'right' && <Icon marginRight={1}>{renderSortedIndicators()}</Icon>}
+        <UITextBody element="span" maxLines={1}>
+          {children}
+        </UITextBody>
+        {sortable && align === 'left' && <Icon marginLeft={1}>{renderSortedIndicators()}</Icon>}
+      </Cell>
+    );
+  },
+);
 HeaderCell.displayName = 'DataGrid.HeaderCell';
 
 export default HeaderCell;
diff --git a/src/components/datagrid/HeaderRowOverlay/HeaderRowOverlay.tsx b/src/components/datagrid/HeaderRowOverlay/HeaderRowOverlay.tsx
index 0843fab33..c87ef80ec 100644
--- a/src/components/datagrid/HeaderRowOverlay/HeaderRowOverlay.tsx
+++ b/src/components/datagrid/HeaderRowOverlay/HeaderRowOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import cx from 'classnames';
 import Box from '../../box';
 import BulkActions from './BulkActions';
@@ -19,33 +19,29 @@ export interface HeaderRowOverlayProps {
   numSelectedRowsLabel?: (numSelectedRows?: number) => string;
 }
 
-const HeaderRowOverlay: GenericComponent<HeaderRowOverlayProps> = ({
-  children,
-  className,
-  headerCellCheckboxSize,
-  numSelectedRows = 0,
-  numSelectedRowsLabel,
-  ...others
-}) => {
-  const classNames = cx(
-    theme['header-row-overlay'],
-    theme[`data-grid-checkbox-size-${headerCellCheckboxSize}`],
-    className,
-  );
+const HeaderRowOverlay: GenericComponent<HeaderRowOverlayProps> = forwardRef<HTMLElement, HeaderRowOverlayProps>(
+  ({ children, className, headerCellCheckboxSize, numSelectedRows = 0, numSelectedRowsLabel, ...others }, ref) => {
+    const classNames = cx(
+      theme['header-row-overlay'],
+      theme[`data-grid-checkbox-size-${headerCellCheckboxSize}`],
+      className,
+    );
 
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      className={classNames}
-      data-teamleader-ui="datagrid-header-row-overlay"
-      {...others}
-    >
-      <NumSelectedRows numSelectedRows={numSelectedRows} numSelectedRowsLabel={numSelectedRowsLabel} />
-      <BulkActions bulkActions={children} />
-    </Box>
-  );
-};
+    return (
+      <Box
+        display="flex"
+        alignItems="center"
+        className={classNames}
+        data-teamleader-ui="datagrid-header-row-overlay"
+        ref={ref}
+        {...others}
+      >
+        <NumSelectedRows numSelectedRows={numSelectedRows} numSelectedRowsLabel={numSelectedRowsLabel} />
+        <BulkActions bulkActions={children} />
+      </Box>
+    );
+  },
+);
 
 export default HeaderRowOverlay;
 HeaderRowOverlay.displayName = 'DataGrid.HeaderRowOverlay';
diff --git a/src/components/datepicker/DatePicker.tsx b/src/components/datepicker/DatePicker.tsx
index 0c8825c62..13f0d39e4 100644
--- a/src/components/datepicker/DatePicker.tsx
+++ b/src/components/datepicker/DatePicker.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import DayPicker, { DayModifiers, DayPickerProps } from 'react-day-picker';
 import Box, { pickBoxProps } from '../box';
 import NavigationBar from './NavigationBar';
@@ -37,95 +37,102 @@ export interface DatePickerProps
   onDayClick?: (day: Date, modifiers: DayModifiers, event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-const DatePicker: GenericComponent<DatePickerProps> = ({
-  bordered = true,
-  className,
-  modifiers,
-  size = 'medium',
-  withMonthPicker,
-  showWeekNumbers,
-  initialMonth,
-  onChange,
-  onDayClick,
-  ...others
-}) => {
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>(others.selectedDate);
-  const [selectedMonth, setSelectedMonth] = useState<Date>();
+const DatePicker: GenericComponent<DatePickerProps> = forwardRef<HTMLElement, DatePickerProps>(
+  (
+    {
+      bordered = true,
+      className,
+      modifiers,
+      size = 'medium',
+      withMonthPicker,
+      showWeekNumbers,
+      initialMonth,
+      onChange,
+      onDayClick,
+      ...others
+    },
+    ref,
+  ) => {
+    const [selectedDate, setSelectedDate] = useState<Date | undefined>(others.selectedDate);
+    const [selectedMonth, setSelectedMonth] = useState<Date>();
 
-  useEffect(() => {
-    setSelectedDate(others.selectedDate);
-    setSelectedMonth(others.selectedDate);
-  }, [others.selectedDate]);
+    useEffect(() => {
+      setSelectedDate(others.selectedDate);
+      setSelectedMonth(others.selectedDate);
+    }, [others.selectedDate]);
 
-  const handleDayClick = (day: Date, modifiers: DayModifiers, event: React.MouseEvent<HTMLDivElement>) => {
-    if (modifiers[theme['disabled']]) {
-      return;
-    }
+    const handleDayClick = (day: Date, modifiers: DayModifiers, event: React.MouseEvent<HTMLDivElement>) => {
+      if (modifiers[theme['disabled']]) {
+        return;
+      }
 
-    setSelectedDate(day);
-    onChange && onChange(day);
-    onDayClick && onDayClick(day, modifiers, event);
-  };
+      setSelectedDate(day);
+      onChange && onChange(day);
+      onDayClick && onDayClick(day, modifiers, event);
+    };
 
-  const handleYearMonthChange = (selectedMonth: Date) => {
-    setSelectedMonth(selectedMonth);
-  };
+    const handleYearMonthChange = (selectedMonth: Date) => {
+      setSelectedMonth(selectedMonth);
+    };
 
-  const getMonthPickerSize = () => {
-    const monthPickerSizeByDatePickerSize: Record<
-      string,
-      Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'hero'>
-    > = {
-      small: 'smallest',
-      medium: showWeekNumbers ? 'medium' : 'small',
-      large: 'large',
+    const getMonthPickerSize = () => {
+      const monthPickerSizeByDatePickerSize: Record<
+        string,
+        Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'hero'>
+      > = {
+        small: 'smallest',
+        medium: showWeekNumbers ? 'medium' : 'small',
+        large: 'large',
+      };
+
+      return monthPickerSizeByDatePickerSize[size];
     };
 
-    return monthPickerSizeByDatePickerSize[size];
-  };
+    const classNames = cx(
+      uiUtilities['reset-font-smoothing'],
+      theme['date-picker'],
+      theme[`is-${size}`],
+      {
+        [theme['is-bordered']]: bordered,
+      },
+      className,
+    );
 
-  const classNames = cx(
-    uiUtilities['reset-font-smoothing'],
-    theme['date-picker'],
-    theme[`is-${size}`],
-    {
-      [theme['is-bordered']]: bordered,
-    },
-    className,
-  );
+    return (
+      <Box {...pickBoxProps(others)} data-teamleader-ui="date-picker" ref={ref}>
+        <DayPicker
+          {...others}
+          localeUtils={localeUtils}
+          initialMonth={others.selectedDate ?? initialMonth}
+          month={selectedMonth}
+          className={classNames}
+          classNames={theme as any}
+          modifiers={modifiers && convertModifiersToClassnames(modifiers, theme)}
+          navbarElement={({ ...props }) => <NavigationBar {...props} size={size} withMonthPicker={withMonthPicker} />}
+          onDayClick={handleDayClick}
+          selectedDays={selectedDate}
+          weekdayElement={({ ...props }) => <WeekDay {...props} size={size} />}
+          showWeekNumbers={showWeekNumbers}
+          fixedWeeks
+          captionElement={
+            withMonthPicker
+              ? ({ date, locale, localeUtils }) => (
+                  <MonthPicker
+                    date={date}
+                    locale={locale}
+                    localeUtils={localeUtils}
+                    onChange={handleYearMonthChange}
+                    size={getMonthPickerSize()}
+                  />
+                )
+              : undefined
+          }
+        />
+      </Box>
+    );
+  },
+);
 
-  return (
-    <Box {...pickBoxProps(others)} data-teamleader-ui="date-picker">
-      <DayPicker
-        {...others}
-        localeUtils={localeUtils}
-        initialMonth={others.selectedDate ?? initialMonth}
-        month={selectedMonth}
-        className={classNames}
-        classNames={theme as any}
-        modifiers={modifiers && convertModifiersToClassnames(modifiers, theme)}
-        navbarElement={({ ...props }) => <NavigationBar {...props} size={size} withMonthPicker={withMonthPicker} />}
-        onDayClick={handleDayClick}
-        selectedDays={selectedDate}
-        weekdayElement={({ ...props }) => <WeekDay {...props} size={size} />}
-        showWeekNumbers={showWeekNumbers}
-        fixedWeeks
-        captionElement={
-          withMonthPicker
-            ? ({ date, locale, localeUtils }) => (
-                <MonthPicker
-                  date={date}
-                  locale={locale}
-                  localeUtils={localeUtils}
-                  onChange={handleYearMonthChange}
-                  size={getMonthPickerSize()}
-                />
-              )
-            : undefined
-        }
-      />
-    </Box>
-  );
-};
+DatePicker.displayName = 'DatePicker';
 
 export default DatePicker;
diff --git a/src/components/detailPage/DetailPage.tsx b/src/components/detailPage/DetailPage.tsx
index ee381d9ff..73c643a5a 100644
--- a/src/components/detailPage/DetailPage.tsx
+++ b/src/components/detailPage/DetailPage.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import DetailPageBody, { DetailPageBodyProps } from './DetailPageBody';
 import DetailPageHeader, { DetailPageHeaderProps } from './DetailPageHeader';
 import Box from '../box';
@@ -14,15 +14,22 @@ interface DetailPageComponent extends GenericComponent<DetailPageProps> {
   Header: GenericComponent<DetailPageHeaderProps>;
 }
 
-const DetailPage: DetailPageComponent = ({ children, ...others }) => {
-  return (
-    <Box data-teamleader-ui="detail-page" {...others}>
-      {children}
-    </Box>
-  );
-};
+const DetailPage: GenericComponent<DetailPageProps> = forwardRef<HTMLElement, DetailPageProps>(
+  ({ children, ...others }, ref) => {
+    return (
+      <Box data-teamleader-ui="detail-page" {...others} ref={ref}>
+        {children}
+      </Box>
+    );
+  },
+);
 
-DetailPage.Body = DetailPageBody;
-DetailPage.Header = DetailPageHeader;
+DetailPage.displayName = 'DetailPage';
 
-export default DetailPage;
+// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
+const DetailPageWithSubComponents = DetailPage as DetailPageComponent;
+
+DetailPageWithSubComponents.Body = DetailPageBody;
+DetailPageWithSubComponents.Header = DetailPageHeader;
+
+export default DetailPageWithSubComponents;
diff --git a/src/components/detailPage/DetailPageBody.tsx b/src/components/detailPage/DetailPageBody.tsx
index 63d254cbc..708282cc2 100644
--- a/src/components/detailPage/DetailPageBody.tsx
+++ b/src/components/detailPage/DetailPageBody.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import Container from '../container';
 import { ContainerProps } from '../container/Container';
@@ -7,13 +7,15 @@ export interface DetailPageBodyProps extends Omit<ContainerProps, 'fixed' | 'pad
   children: ReactNode;
 }
 
-const DetailPageBody: GenericComponent<DetailPageBodyProps> = ({ children, ...others }) => {
-  return (
-    <Container data-teamleader-ui="detail-page-body" {...others} fixed paddingTop={6} paddingBottom={8}>
-      {children}
-    </Container>
-  );
-};
+const DetailPageBody: GenericComponent<DetailPageBodyProps> = forwardRef<HTMLElement, DetailPageBodyProps>(
+  ({ children, ...others }, ref) => {
+    return (
+      <Container data-teamleader-ui="detail-page-body" {...others} fixed paddingTop={6} paddingBottom={8} ref={ref}>
+        {children}
+      </Container>
+    );
+  },
+);
 
 DetailPageBody.displayName = 'DetailPage.Body';
 
diff --git a/src/components/detailPage/DetailPageHeader.tsx b/src/components/detailPage/DetailPageHeader.tsx
index 42f9ffb9d..7cdc2d810 100644
--- a/src/components/detailPage/DetailPageHeader.tsx
+++ b/src/components/detailPage/DetailPageHeader.tsx
@@ -1,5 +1,5 @@
 import { IconArrowLeftSmallOutline } from '@teamleader/ui-icons';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import BadgedLink from '../badgedLink';
 import { BadgedLinkProps } from '../badgedLink/BadgedLink';
@@ -18,52 +18,48 @@ export interface DetailPageHeaderProps extends Omit<ContainerProps, 'title'> {
   titleSuffix?: React.ReactNode;
 }
 
-const DetailPageHeader: GenericComponent<DetailPageHeaderProps> = ({
-  backLinkProps,
-  children,
-  title,
-  titleColor = 'teal',
-  titleSuffix,
-  ...others
-}) => {
-  return (
-    <Container
-      data-teamleader-ui="detail-page-header"
-      backgroundColor="neutral"
-      backgroundTint="lightest"
-      borderBottomWidth={1}
-      borderTint="normal"
-      padding={4}
-      {...others}
-    >
-      <Box className={theme['header-inner']} display="flex">
-        {backLinkProps && (
-          <TextBody className={theme['back-link']}>
-            <BadgedLink {...backLinkProps} icon={<IconArrowLeftSmallOutline />} inherit={false} />
-          </TextBody>
-        )}
-        <Box flex="1 0 200px" paddingTop={5} overflow="hidden">
-          <Box alignItems="center" display="flex">
-            <Heading1
-              color={titleColor}
-              maxLines={1}
-              tint={titleColor === 'neutral' ? 'dark' : 'darkest'}
-              title={typeof title === 'string' ? title : undefined}
-            >
-              {title}
-            </Heading1>
-            {titleSuffix && <Box marginLeft={3}>{titleSuffix}</Box>}
+const DetailPageHeader: GenericComponent<DetailPageHeaderProps> = forwardRef<HTMLElement, DetailPageHeaderProps>(
+  ({ backLinkProps, children, title, titleColor = 'teal', titleSuffix, ...others }, ref) => {
+    return (
+      <Container
+        data-teamleader-ui="detail-page-header"
+        backgroundColor="neutral"
+        backgroundTint="lightest"
+        borderBottomWidth={1}
+        borderTint="normal"
+        padding={4}
+        {...others}
+        ref={ref}
+      >
+        <Box className={theme['header-inner']} display="flex">
+          {backLinkProps && (
+            <TextBody className={theme['back-link']}>
+              <BadgedLink {...backLinkProps} icon={<IconArrowLeftSmallOutline />} inherit={false} />
+            </TextBody>
+          )}
+          <Box flex="1 0 200px" paddingTop={5} overflow="hidden">
+            <Box alignItems="center" display="flex">
+              <Heading1
+                color={titleColor}
+                maxLines={1}
+                tint={titleColor === 'neutral' ? 'dark' : 'darkest'}
+                title={typeof title === 'string' ? title : undefined}
+              >
+                {title}
+              </Heading1>
+              {titleSuffix && <Box marginLeft={3}>{titleSuffix}</Box>}
+            </Box>
           </Box>
+          {children && (
+            <Box flex="0 0 auto" display="flex" paddingLeft={7}>
+              {children}
+            </Box>
+          )}
         </Box>
-        {children && (
-          <Box flex="0 0 auto" display="flex" paddingLeft={7}>
-            {children}
-          </Box>
-        )}
-      </Box>
-    </Container>
-  );
-};
+      </Container>
+    );
+  },
+);
 
 DetailPageHeader.displayName = 'DetailPage.Header';
 
diff --git a/src/components/emptyState/EmptyState.tsx b/src/components/emptyState/EmptyState.tsx
index f4afaadd5..277484507 100644
--- a/src/components/emptyState/EmptyState.tsx
+++ b/src/components/emptyState/EmptyState.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import Box from '../box';
 import cx from 'classnames';
 import {
@@ -28,51 +28,48 @@ const illustrationMap = {
   large: <IllustrationEmptyState130X130Pointer />,
 };
 
-const EmptyState: GenericComponent<EmptyStateProps> = ({
-  className,
-  metaText,
-  hidePointer = false,
-  size = 'medium',
-  title,
-  action,
-  ...others
-}) => {
-  const classNames = cx(
-    theme['wrapper'],
-    theme[`is-${size}`],
-    {
-      [theme['has-pointer']]: title,
-    },
-    className as string,
-  );
+const EmptyState: GenericComponent<EmptyStateProps> = forwardRef<HTMLElement, EmptyStateProps>(
+  ({ className, metaText, hidePointer = false, size = 'medium', title, action, ...others }, ref) => {
+    const classNames = cx(
+      theme['wrapper'],
+      theme[`is-${size}`],
+      {
+        [theme['has-pointer']]: title,
+      },
+      className as string,
+    );
 
-  return (
-    <Box
-      data-teamleader-ui="empty-state"
-      {...others}
-      alignItems="center"
-      className={classNames}
-      display="flex"
-      flexDirection="column"
-      justifyContent="center"
-      textAlign="center"
-    >
-      {title && !hidePointer && <div className={theme['pointer']}>{illustrationMap[size]}</div>}
-      <div className={theme['content']}>
-        {title && <Heading3 color="teal">{title}</Heading3>}
-        {metaText && (
-          <TextBody marginTop={title ? 2 : undefined} color="neutral">
-            {metaText}
-          </TextBody>
-        )}
-        {action && (
-          <Box marginTop={3}>
-            <BadgedLink {...action} icon={<IconAddSmallOutline />} inherit={false} />
-          </Box>
-        )}
-      </div>
-    </Box>
-  );
-};
+    return (
+      <Box
+        data-teamleader-ui="empty-state"
+        {...others}
+        alignItems="center"
+        className={classNames}
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        textAlign="center"
+        ref={ref}
+      >
+        {title && !hidePointer && <div className={theme['pointer']}>{illustrationMap[size]}</div>}
+        <div className={theme['content']}>
+          {title && <Heading3 color="teal">{title}</Heading3>}
+          {metaText && (
+            <TextBody marginTop={title ? 2 : undefined} color="neutral">
+              {metaText}
+            </TextBody>
+          )}
+          {action && (
+            <Box marginTop={3}>
+              <BadgedLink {...action} icon={<IconAddSmallOutline />} inherit={false} />
+            </Box>
+          )}
+        </div>
+      </Box>
+    );
+  },
+);
+
+EmptyState.displayName = 'EmptyState';
 
 export default EmptyState;
diff --git a/src/components/grid/GridItem.tsx b/src/components/grid/GridItem.tsx
index 65f4fc4a9..400e334df 100644
--- a/src/components/grid/GridItem.tsx
+++ b/src/components/grid/GridItem.tsx
@@ -1,12 +1,20 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 
 export type GridItemProps = Partial<{ children: ReactNode; area: string }>;
 
-const GridItem: GenericComponent<GridItemProps> = ({ children, area }) => {
-  const gridItemStyles = { gridArea: area };
+const GridItem: GenericComponent<GridItemProps> = forwardRef<HTMLDivElement, GridItemProps>(
+  ({ children, area }, ref) => {
+    const gridItemStyles = { gridArea: area };
 
-  return <div style={gridItemStyles}>{children}</div>;
-};
+    return (
+      <div style={gridItemStyles} ref={ref}>
+        {children}
+      </div>
+    );
+  },
+);
+
+GridItem.displayName = 'Grid';
 
 export default GridItem;
diff --git a/src/components/island/Island.tsx b/src/components/island/Island.tsx
index bb323eb38..e9446e6cd 100644
--- a/src/components/island/Island.tsx
+++ b/src/components/island/Island.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactNode } from 'react';
+import React, { MouseEvent, ReactNode, forwardRef } from 'react';
 import Box, { pickBoxProps } from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
@@ -25,37 +25,35 @@ export interface IslandProps extends Omit<BoxProps, 'size'> {
   size?: Exclude<(typeof SIZES)[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
 }
 
-const Island: GenericComponent<IslandProps> = ({
-  children,
-  className,
-  color = 'white',
-  size = 'medium',
-  onClick,
-  ...others
-}: IslandProps) => {
-  const classNames = cx(theme[color], className);
-  const boxProps = pickBoxProps(others);
+const Island: GenericComponent<IslandProps> = forwardRef<HTMLElement, IslandProps>(
+  ({ children, className, color = 'white', size = 'medium', onClick, ...others }: IslandProps, ref) => {
+    const classNames = cx(theme[color], className);
+    const boxProps = pickBoxProps(others);
 
-  return (
-    <Box
-      data-teamleader-ui="island"
-      backgroundColor={color === 'white' ? 'neutral' : color}
-      backgroundTint={color === 'neutral' ? 'light' : 'lightest'}
-      borderRadius="rounded"
-      borderColor={color === 'white' ? 'neutral' : color}
-      borderTint="normal"
-      borderBottomWidth={1}
-      borderLeftWidth={1}
-      borderRightWidth={1}
-      borderTopWidth={1}
-      className={classNames}
-      padding={PADDING[size]}
-      onClick={onClick}
-      {...boxProps}
-    >
-      {children}
-    </Box>
-  );
-};
+    return (
+      <Box
+        data-teamleader-ui="island"
+        backgroundColor={color === 'white' ? 'neutral' : color}
+        backgroundTint={color === 'neutral' ? 'light' : 'lightest'}
+        borderRadius="rounded"
+        borderColor={color === 'white' ? 'neutral' : color}
+        borderTint="normal"
+        borderBottomWidth={1}
+        borderLeftWidth={1}
+        borderRightWidth={1}
+        borderTopWidth={1}
+        className={classNames}
+        padding={PADDING[size]}
+        onClick={onClick}
+        {...boxProps}
+        ref={ref}
+      >
+        {children}
+      </Box>
+    );
+  },
+);
+
+Island.displayName = 'Island';
 
 export default Island;
diff --git a/src/components/label/Label.tsx b/src/components/label/Label.tsx
index 5fb3594be..ce92d1015 100644
--- a/src/components/label/Label.tsx
+++ b/src/components/label/Label.tsx
@@ -1,5 +1,5 @@
 import { IconInfoBadgedSmallFilled } from '@teamleader/ui-icons';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import { SIZES } from '../../constants';
 import Box from '../box';
@@ -19,59 +19,55 @@ export interface LabelProps extends Omit<BoxProps, 'children'> {
   tooltipProps?: Record<string, any>;
 }
 
-const Label: GenericComponent<LabelProps> = ({
-  children,
-  inverse = false,
-  required = false,
-  size = 'medium',
-  tooltip,
-  tooltipProps,
-  ...others
-}) => {
-  const childProps = {
-    inverse,
-    marginTop: 1,
-    size,
-  };
+const Label: GenericComponent<LabelProps> = forwardRef<HTMLElement, LabelProps>(
+  ({ children, inverse = false, required = false, size = 'medium', tooltip, tooltipProps, ...others }, ref) => {
+    const childProps = {
+      inverse,
+      marginTop: 1,
+      size,
+    };
 
-  const Element = {
-    small: TextBodyCompact,
-    medium: TextBodyCompact,
-    large: TextDisplay,
-  }[size];
+    const Element = {
+      small: TextBodyCompact,
+      medium: TextBodyCompact,
+      large: TextDisplay,
+    }[size];
 
-  return (
-    <Box data-teamleader-ui="label" display="block" element="label" marginBottom={3} {...others}>
-      {React.Children.map(children, (child) =>
-        typeof child !== 'string' && React.isValidElement(child) ? (
-          React.cloneElement(child, { ...childProps, ...child.props })
-        ) : (
-          <Box display="flex" alignItems="center">
-            <Element color={inverse ? 'neutral' : 'teal'} tint={inverse ? 'lightest' : 'darkest'} element="span">
-              {child}
-            </Element>
-            {required && (
-              <TextSmall color="ruby" element="span" marginLeft={1} tint="dark">
-                *
-              </TextSmall>
-            )}
-            {tooltip && (
-              <TooltippedIcon
-                tooltip={<TextSmall>{tooltip}</TextSmall>}
-                tooltipSize="small"
-                color={inverse ? 'neutral' : 'teal'}
-                tint={inverse ? 'lightest' : 'darkest'}
-                marginLeft={1}
-                {...tooltipProps}
-              >
-                <IconInfoBadgedSmallFilled />
-              </TooltippedIcon>
-            )}
-          </Box>
-        ),
-      )}
-    </Box>
-  );
-};
+    return (
+      <Box data-teamleader-ui="label" display="block" element="label" marginBottom={3} ref={ref} {...others}>
+        {React.Children.map(children, (child) =>
+          typeof child !== 'string' && React.isValidElement(child) ? (
+            React.cloneElement(child, { ...childProps, ...child.props })
+          ) : (
+            <Box display="flex" alignItems="center">
+              <Element color={inverse ? 'neutral' : 'teal'} tint={inverse ? 'lightest' : 'darkest'} element="span">
+                {child}
+              </Element>
+              {required && (
+                <TextSmall color="ruby" element="span" marginLeft={1} tint="dark">
+                  *
+                </TextSmall>
+              )}
+              {tooltip && (
+                <TooltippedIcon
+                  tooltip={<TextSmall>{tooltip}</TextSmall>}
+                  tooltipSize="small"
+                  color={inverse ? 'neutral' : 'teal'}
+                  tint={inverse ? 'lightest' : 'darkest'}
+                  marginLeft={1}
+                  {...tooltipProps}
+                >
+                  <IconInfoBadgedSmallFilled />
+                </TooltippedIcon>
+              )}
+            </Box>
+          ),
+        )}
+      </Box>
+    );
+  },
+);
+
+Label.displayName = 'Label';
 
 export default Label;
diff --git a/src/components/labelValuePair/Label.tsx b/src/components/labelValuePair/Label.tsx
index a356edec5..1c54dcdd8 100644
--- a/src/components/labelValuePair/Label.tsx
+++ b/src/components/labelValuePair/Label.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import { BoxProps } from '../box/Box';
 import { Heading5 } from '../typography';
@@ -8,18 +8,23 @@ export interface LabelProps extends Omit<BoxProps, 'children'> {
   children?: ReactNode;
 }
 
-const Label: GenericComponent<LabelProps> = ({ children, inline, ...others }) => (
-  <Heading5
-    color="teal"
-    flex={inline ? '0 0 40%' : 1}
-    marginBottom={inline ? 0 : 1}
-    marginRight={inline ? 2 : 0}
-    maxLines={2}
-    paddingVertical={inline ? 1 : 0}
-    {...others}
-  >
-    {children}
-  </Heading5>
+const Label: GenericComponent<LabelProps> = forwardRef<HTMLElement, LabelProps>(
+  ({ children, inline, ...others }, ref) => (
+    <Heading5
+      color="teal"
+      flex={inline ? '0 0 40%' : 1}
+      marginBottom={inline ? 0 : 1}
+      marginRight={inline ? 2 : 0}
+      maxLines={2}
+      paddingVertical={inline ? 1 : 0}
+      {...others}
+      ref={ref}
+    >
+      {children}
+    </Heading5>
+  ),
 );
 
+Label.displayName = 'LabelValuePair.Label';
+
 export default Label;
diff --git a/src/components/labelValuePair/LabelValuePair.tsx b/src/components/labelValuePair/LabelValuePair.tsx
index a952ff1ef..0024b2c9d 100644
--- a/src/components/labelValuePair/LabelValuePair.tsx
+++ b/src/components/labelValuePair/LabelValuePair.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import Box from '../box';
 import { BoxProps } from '../box/Box';
@@ -7,7 +7,7 @@ import isReactElement from '../utils/is-react-element';
 import Label, { LabelProps } from './Label';
 import Value, { ValueProps } from './Value';
 
-export interface LabelValuePairProps extends Omit<BoxProps, 'children'> {
+export interface LabelValuePairProps extends Omit<BoxProps, 'children' | 'ref'> {
   alignValue?: 'left' | 'right';
   children: ReactNode;
   inline?: boolean;
@@ -18,38 +18,44 @@ interface LabelValuePairComponent extends GenericComponent<LabelValuePairProps>
   Value: GenericComponent<ValueProps>;
 }
 
-const LabelValuePair: LabelValuePairComponent = ({ alignValue = 'left', children, inline = true, ...others }) => (
-  <Box
-    data-teamleader-ui="label-value-pair"
-    {...others}
-    display="flex"
-    flexDirection={inline ? 'row' : 'column'}
-    marginBottom={inline ? 1 : 3}
-  >
-    {React.Children.map(children, (child) => {
-      if (!isReactElement(child)) {
-        return null;
-      }
-      if (isComponentOfType(Label, child) && React.isValidElement(child)) {
-        return React.cloneElement(child, { inline, ...child.props });
-      }
-
-      if (isComponentOfType(Value, child) && React.isValidElement(child)) {
-        return React.cloneElement(child, {
-          justifyContent: alignValue === 'left' ? 'flex-start' : 'flex-end',
-          paddingVertical: inline ? 1 : 0,
-          textAlign: alignValue,
-          // @ts-ignore TS acting weird, child.props is there
-          ...child.props,
-        });
-      }
-    })}
-  </Box>
+const LabelValuePair: GenericComponent<LabelValuePairProps> = forwardRef<HTMLElement, LabelValuePairProps>(
+  ({ alignValue = 'left', children, inline = true, ...others }, ref) => (
+    <Box
+      data-teamleader-ui="label-value-pair"
+      {...others}
+      display="flex"
+      flexDirection={inline ? 'row' : 'column'}
+      marginBottom={inline ? 1 : 3}
+      ref={ref}
+    >
+      {React.Children.map(children, (child) => {
+        if (!isReactElement(child)) {
+          return null;
+        }
+        if (isComponentOfType(Label, child) && React.isValidElement(child)) {
+          return React.cloneElement(child, { inline, ...child.props });
+        }
+
+        if (isComponentOfType(Value, child) && React.isValidElement(child)) {
+          return React.cloneElement(child, {
+            justifyContent: alignValue === 'left' ? 'flex-start' : 'flex-end',
+            paddingVertical: inline ? 1 : 0,
+            textAlign: alignValue,
+            // @ts-ignore TS acting weird, child.props is there
+            ...child.props,
+          });
+        }
+      })}
+    </Box>
+  ),
 );
 
-LabelValuePair.Label = Label;
-LabelValuePair.Label.displayName = 'LabelValuePair.Label';
-LabelValuePair.Value = Value;
-LabelValuePair.Value.displayName = 'LabelValuePair.Value';
+LabelValuePair.displayName = 'LabelValuePair';
+
+// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
+const LabelValuePairWithSubComponents = LabelValuePair as LabelValuePairComponent;
+
+LabelValuePairWithSubComponents.Label = Label;
+LabelValuePairWithSubComponents.Value = Value;
 
-export default LabelValuePair;
+export default LabelValuePairWithSubComponents;
diff --git a/src/components/labelValuePair/LabelValuePairGroup.tsx b/src/components/labelValuePair/LabelValuePairGroup.tsx
index 81ab1ac7f..4b3c3bc10 100644
--- a/src/components/labelValuePair/LabelValuePairGroup.tsx
+++ b/src/components/labelValuePair/LabelValuePairGroup.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import Box from '../box';
 import { BoxProps } from '../box/Box';
@@ -9,15 +9,20 @@ export interface LabelValuePairGroupProps extends Omit<BoxProps, 'children'> {
   title?: string | ReactNode;
 }
 
-const LabelValuePairGroup: GenericComponent<LabelValuePairGroupProps> = ({ children, title, ...others }) => {
+const LabelValuePairGroup: GenericComponent<LabelValuePairGroupProps> = forwardRef<
+  HTMLElement,
+  LabelValuePairGroupProps
+>(({ children, title, ...others }, ref) => {
   return (
-    <Box data-teamleader-ui="label-value-pair-group" {...others}>
+    <Box data-teamleader-ui="label-value-pair-group" {...others} ref={ref}>
       <Heading4 color="neutral" marginBottom={2}>
         {title}
       </Heading4>
       {children}
     </Box>
   );
-};
+});
+
+LabelValuePairGroup.displayName = 'LabelValuePairGroup';
 
 export default LabelValuePairGroup;
diff --git a/src/components/labelValuePair/Value.tsx b/src/components/labelValuePair/Value.tsx
index f89d5d38c..7fea33aad 100644
--- a/src/components/labelValuePair/Value.tsx
+++ b/src/components/labelValuePair/Value.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import Box from '../box';
 import { BoxProps } from '../box/Box';
@@ -7,10 +7,12 @@ export interface ValueProps extends Omit<BoxProps, 'children'> {
   children?: ReactNode;
 }
 
-const Value: GenericComponent<ValueProps> = ({ children, ...others }) => (
-  <Box display="flex" flex={1} overflow="hidden" {...others}>
+const Value: GenericComponent<ValueProps> = forwardRef<HTMLElement, ValueProps>(({ children, ...others }, ref) => (
+  <Box display="flex" flex={1} overflow="hidden" {...others} ref={ref}>
     {children}
   </Box>
-);
+));
+
+Value.displayName = 'LabelValuePair.Value';
 
 export default Value;
diff --git a/src/components/loadingBar/LoadingBar.tsx b/src/components/loadingBar/LoadingBar.tsx
index a33afdffd..1ac6ab752 100644
--- a/src/components/loadingBar/LoadingBar.tsx
+++ b/src/components/loadingBar/LoadingBar.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import { COLORS, SIZES, TINTS } from '../../constants';
 import Box from '../box';
@@ -17,25 +17,23 @@ export interface LoadingBarProps extends Omit<BoxProps, 'className' | 'size'> {
   tint?: (typeof TINTS)[number];
 }
 
-const LoadingBar: GenericComponent<LoadingBarProps> = ({
-  className,
-  color = 'mint',
-  size = 'small',
-  tint = 'normal',
-  ...others
-}) => {
-  const classNames = cx(
-    theme['loading-bar'],
-    theme[`is-${color}`],
-    theme[`is-${size}`],
-    theme[`is-${tint}`],
-    className,
-  );
-  return (
-    <Box data-teamleader-ui="loading-bar" className={classNames} {...others}>
-      <div className={theme['loading-bar-indicator']} />
-    </Box>
-  );
-};
+const LoadingBar: GenericComponent<LoadingBarProps> = forwardRef<HTMLElement, LoadingBarProps>(
+  ({ className, color = 'mint', size = 'small', tint = 'normal', ...others }, ref) => {
+    const classNames = cx(
+      theme['loading-bar'],
+      theme[`is-${color}`],
+      theme[`is-${size}`],
+      theme[`is-${tint}`],
+      className,
+    );
+    return (
+      <Box data-teamleader-ui="loading-bar" className={classNames} {...others} ref={ref}>
+        <div className={theme['loading-bar-indicator']} />
+      </Box>
+    );
+  },
+);
+
+LoadingBar.displayName = 'LoadingBar';
 
 export default LoadingBar;
diff --git a/src/components/marketingButtonGroup/MarketingButtonGroup.tsx b/src/components/marketingButtonGroup/MarketingButtonGroup.tsx
index c03949db0..7aedb1259 100644
--- a/src/components/marketingButtonGroup/MarketingButtonGroup.tsx
+++ b/src/components/marketingButtonGroup/MarketingButtonGroup.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import omit from 'lodash.omit';
 import Box, { omitBoxProps } from '../box';
 import Button, { ButtonProps } from './Button';
@@ -23,7 +23,10 @@ interface MarketingButtonGroupComponent extends GenericComponent<MarketingButton
   Button: GenericComponent<ButtonProps>;
 }
 
-const MarketingButtonGroup: MarketingButtonGroupComponent = ({ children, className, value, onChange, ...others }) => {
+const MarketingButtonGroup: GenericComponent<MarketingButtonGroupProps> = forwardRef<
+  HTMLElement,
+  MarketingButtonGroupProps
+>(({ children, className, value, onChange, ...others }, ref) => {
   const handleChange = (value: string, event: React.ChangeEvent) => {
     if (onChange) {
       onChange(value, event);
@@ -33,7 +36,7 @@ const MarketingButtonGroup: MarketingButtonGroupComponent = ({ children, classNa
   const classNames = cx(theme['group'], theme['segmented'], className);
 
   return (
-    <Box data-teamleader-ui="button-group" className={classNames} {...others}>
+    <Box data-teamleader-ui="button-group" className={classNames} {...others} ref={ref}>
       {React.Children.map(children, (child) => {
         if (!React.isValidElement(child)) {
           return;
@@ -62,8 +65,13 @@ const MarketingButtonGroup: MarketingButtonGroupComponent = ({ children, classNa
       })}
     </Box>
   );
-};
+});
 
-MarketingButtonGroup.Button = Button;
+MarketingButtonGroup.displayName = 'MarketingButtonGroup';
 
-export default MarketingButtonGroup;
+// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
+const MarketingButtonGroupWithSubComponents = MarketingButtonGroup as MarketingButtonGroupComponent;
+
+MarketingButtonGroupWithSubComponents.Button = Button;
+
+export default MarketingButtonGroupWithSubComponents;
diff --git a/src/components/marketingLockBadge/MarketingLockBadge.tsx b/src/components/marketingLockBadge/MarketingLockBadge.tsx
index 9de86e910..bedef8848 100644
--- a/src/components/marketingLockBadge/MarketingLockBadge.tsx
+++ b/src/components/marketingLockBadge/MarketingLockBadge.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Box from '../box';
 import Icon from '../icon';
 import cx from 'classnames';
@@ -13,24 +13,29 @@ export interface MarketingLockBadgeProps extends Omit<BoxProps, 'ref'> {
   size?: Exclude<(typeof SIZES)[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
-const MarketingLockBadge: GenericComponent<MarketingLockBadgeProps> = ({ className, size = 'medium', ...others }) => {
-  const classNames = cx(theme['wrapper'], theme[`is-${size}`], className);
+const MarketingLockBadge: GenericComponent<MarketingLockBadgeProps> = forwardRef<HTMLElement, MarketingLockBadgeProps>(
+  ({ className, size = 'medium', ...others }, ref) => {
+    const classNames = cx(theme['wrapper'], theme[`is-${size}`], className);
 
-  return (
-    <Box
-      data-teamleader-ui="marketing-lock-badge"
-      {...others}
-      alignItems="center"
-      borderRadius="rounded"
-      display="flex"
-      justifyContent="center"
-      className={classNames}
-    >
-      <Icon className={theme['icon']}>
-        <IconLockSmallFilled />
-      </Icon>
-    </Box>
-  );
-};
+    return (
+      <Box
+        data-teamleader-ui="marketing-lock-badge"
+        {...others}
+        alignItems="center"
+        borderRadius="rounded"
+        display="flex"
+        justifyContent="center"
+        className={classNames}
+        ref={ref}
+      >
+        <Icon className={theme['icon']}>
+          <IconLockSmallFilled />
+        </Icon>
+      </Box>
+    );
+  },
+);
+
+MarketingLockBadge.displayName = 'MarketingLockBadge';
 
 export default MarketingLockBadge;
diff --git a/src/components/marketingMarker/MarketingMarker.tsx b/src/components/marketingMarker/MarketingMarker.tsx
index 761ba5279..c4d371aab 100644
--- a/src/components/marketingMarker/MarketingMarker.tsx
+++ b/src/components/marketingMarker/MarketingMarker.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import Box from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
@@ -10,21 +10,26 @@ export interface MarketingMarkerProps extends Omit<BoxProps, 'ref'> {
   className?: string;
 }
 
-const MarketingMarker: GenericComponent<MarketingMarkerProps> = ({ children, className, ...others }) => {
-  const classNames = cx(theme['marker'], className);
+const MarketingMarker: GenericComponent<MarketingMarkerProps> = forwardRef<HTMLElement, MarketingMarkerProps>(
+  ({ children, className, ...others }, ref) => {
+    const classNames = cx(theme['marker'], className);
 
-  return (
-    <Box
-      data-teamleader-ui="marketing-marker"
-      {...others}
-      className={classNames}
-      element="mark"
-      paddingHorizontal={1}
-      marginHorizontal={-1}
-    >
-      {children}
-    </Box>
-  );
-};
+    return (
+      <Box
+        data-teamleader-ui="marketing-marker"
+        {...others}
+        className={classNames}
+        element="mark"
+        paddingHorizontal={1}
+        marginHorizontal={-1}
+        ref={ref}
+      >
+        {children}
+      </Box>
+    );
+  },
+);
+
+MarketingMarker.displayName = 'MarketingMarker';
 
 export default MarketingMarker;
diff --git a/src/components/marketingMenuItem/MarketingMenuItem.tsx b/src/components/marketingMenuItem/MarketingMenuItem.tsx
index f7cc1375e..ccb09b7c0 100644
--- a/src/components/marketingMenuItem/MarketingMenuItem.tsx
+++ b/src/components/marketingMenuItem/MarketingMenuItem.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, MouseEvent } from 'react';
+import React, { ReactNode, MouseEvent, forwardRef } from 'react';
 import Box, { omitBoxProps, pickBoxProps } from '../box';
 import Icon from '../icon';
 import { TextBodyCompact } from '../typography';
@@ -25,61 +25,56 @@ export interface MarketingMenuItemProps extends Omit<BoxProps, 'children' | 'cla
   selected?: boolean;
 }
 
-const MarketingMenuItem: GenericComponent<MarketingMenuItemProps> = ({
-  onClick,
-  icon,
-  caption,
-  className = '',
-  element = 'button',
-  label,
-  selected = false,
-  ...others
-}) => {
-  const classNames = cx(
-    theme['marketing-menu-item'],
-    {
-      [theme['is-selected']]: selected,
-    },
-    className,
-  );
+const MarketingMenuItem: GenericComponent<MarketingMenuItemProps> = forwardRef<HTMLElement, MarketingMenuItemProps>(
+  ({ onClick, icon, caption, className = '', element = 'button', label, selected = false, ...others }, ref) => {
+    const classNames = cx(
+      theme['marketing-menu-item'],
+      {
+        [theme['is-selected']]: selected,
+      },
+      className,
+    );
 
-  const boxProps = pickBoxProps(others);
-  const restProps = omitBoxProps(others);
+    const boxProps = pickBoxProps(others);
+    const restProps = omitBoxProps(others);
 
-  return (
-    <Box {...boxProps} data-teamleader-ui="menu-item" display="flex" element="li">
-      <Box
-        onClick={onClick}
-        alignItems="center"
-        className={classNames}
-        display="flex"
-        element={element}
-        flex="1 1 auto"
-        paddingHorizontal={3}
-        paddingVertical={2}
-        textAlign="left"
-        {...(element === 'a' && { tabIndex: -1 })}
-        {...restProps}
-      >
-        <MarketingLockBadge size="small" />
+    return (
+      <Box {...boxProps} data-teamleader-ui="menu-item" display="flex" element="li" ref={ref}>
         <Box
-          marginHorizontal={3}
+          onClick={onClick}
+          alignItems="center"
+          className={classNames}
+          display="flex"
+          element={element}
           flex="1 1 auto"
-          className={cx(theme['marketing-menu-item-text-container'], {
-            [theme['marketing-menu-item-link-container']]: element === 'a',
-          })}
+          paddingHorizontal={3}
+          paddingVertical={2}
+          textAlign="left"
+          {...(element === 'a' && { tabIndex: -1 })}
+          {...restProps}
         >
-          <TextBodyCompact>{label}</TextBodyCompact>
-          {caption && (
-            <TextBodyCompact color="neutral" tint="darkest">
-              {caption}
-            </TextBodyCompact>
-          )}
+          <MarketingLockBadge size="small" />
+          <Box
+            marginHorizontal={3}
+            flex="1 1 auto"
+            className={cx(theme['marketing-menu-item-text-container'], {
+              [theme['marketing-menu-item-link-container']]: element === 'a',
+            })}
+          >
+            <TextBodyCompact>{label}</TextBodyCompact>
+            {caption && (
+              <TextBodyCompact color="neutral" tint="darkest">
+                {caption}
+              </TextBodyCompact>
+            )}
+          </Box>
+          {icon && <Icon className={theme['marketing-menu-item-icon']}>{icon}</Icon>}
         </Box>
-        {icon && <Icon className={theme['marketing-menu-item-icon']}>{icon}</Icon>}
       </Box>
-    </Box>
-  );
-};
+    );
+  },
+);
+
+MarketingMenuItem.displayName = 'MarketingMenuItem';
 
 export default MarketingMenuItem;
diff --git a/src/components/marketingStatusLabel/MarketingStatusLabel.tsx b/src/components/marketingStatusLabel/MarketingStatusLabel.tsx
index 253aa1ed1..f5d2a319e 100644
--- a/src/components/marketingStatusLabel/MarketingStatusLabel.tsx
+++ b/src/components/marketingStatusLabel/MarketingStatusLabel.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import Box from '../box';
 import Icon from '../icon';
 import cx from 'classnames';
@@ -16,14 +16,10 @@ export interface MarketingStatusLabelProps extends Omit<BoxProps, 'ref' | 'size'
   icon?: ReactNode;
 }
 
-const MarketingStatusLabel: GenericComponent<MarketingStatusLabelProps> = ({
-  children,
-  className,
-  fullWidth = false,
-  size = 'medium',
-  icon,
-  ...others
-}) => {
+const MarketingStatusLabel: GenericComponent<MarketingStatusLabelProps> = forwardRef<
+  HTMLElement,
+  MarketingStatusLabelProps
+>(({ children, className, fullWidth = false, size = 'medium', icon, ...others }, ref) => {
   const classNames = cx(theme['wrapper'], theme[`is-${size}`], className);
 
   const TextElement = size === 'small' ? UITextSmall : UITextBody;
@@ -37,6 +33,7 @@ const MarketingStatusLabel: GenericComponent<MarketingStatusLabelProps> = ({
       justifyContent="center"
       className={classNames}
       paddingHorizontal={2}
+      ref={ref}
     >
       <TextElement className={theme['text']}>{children}</TextElement>
       {icon && (
@@ -46,6 +43,8 @@ const MarketingStatusLabel: GenericComponent<MarketingStatusLabelProps> = ({
       )}
     </Box>
   );
-};
+});
+
+MarketingStatusLabel.displayName = 'MarketingStatusLabel';
 
 export default MarketingStatusLabel;
diff --git a/src/components/marketingTypography/MarketingHeading1.tsx b/src/components/marketingTypography/MarketingHeading1.tsx
index aa193a2eb..5fe69fd56 100644
--- a/src/components/marketingTypography/MarketingHeading1.tsx
+++ b/src/components/marketingTypography/MarketingHeading1.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import Box from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
@@ -10,14 +10,19 @@ export interface MarketingHeadingProps extends Omit<BoxProps, 'ref'> {
   className?: string;
 }
 
-const MarketingHeading1: GenericComponent<MarketingHeadingProps> = ({ children, className, ...others }) => {
+const MarketingHeading1: GenericComponent<MarketingHeadingProps> = forwardRef<
+  HTMLHeadingElement,
+  MarketingHeadingProps
+>(({ children, className, ...others }, ref) => {
   const classNames = cx(theme['heading-1'], className);
 
   return (
-    <Box data-teamleader-ui="marketing-heading-1" {...others} className={classNames} element="h1">
+    <Box data-teamleader-ui="marketing-heading-1" {...others} className={classNames} element="h1" ref={ref}>
       {children}
     </Box>
   );
-};
+});
+
+MarketingHeading1.displayName = 'MarketingHeading1';
 
 export default MarketingHeading1;
diff --git a/src/components/marketingTypography/MarketingHeading2.tsx b/src/components/marketingTypography/MarketingHeading2.tsx
index 9e9e67d80..eade5acde 100644
--- a/src/components/marketingTypography/MarketingHeading2.tsx
+++ b/src/components/marketingTypography/MarketingHeading2.tsx
@@ -1,18 +1,23 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Box from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
 import { GenericComponent } from '../../@types/types';
 import { MarketingHeadingProps } from './MarketingHeading1';
 
-const MarketingHeading2: GenericComponent<MarketingHeadingProps> = ({ children, className, ...others }) => {
+const MarketingHeading2: GenericComponent<MarketingHeadingProps> = forwardRef<
+  HTMLHeadingElement,
+  MarketingHeadingProps
+>(({ children, className, ...others }, ref) => {
   const classNames = cx(theme['heading-2'], className);
 
   return (
-    <Box data-teamleader-ui="marketing-heading-2" {...others} className={classNames} element="h2">
+    <Box data-teamleader-ui="marketing-heading-2" {...others} className={classNames} element="h2" ref={ref}>
       {children}
     </Box>
   );
-};
+});
+
+MarketingHeading2.displayName = 'MarketingHeading2';
 
 export default MarketingHeading2;
diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/MenuItem.tsx
index e88787d62..c8117465c 100644
--- a/src/components/menu/MenuItem.tsx
+++ b/src/components/menu/MenuItem.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, MouseEvent, CSSProperties } from 'react';
+import React, { ReactNode, MouseEvent, CSSProperties, forwardRef } from 'react';
 import Box, { omitBoxProps, pickBoxProps } from '../box';
 import Icon from '../icon';
 import { TextBody } from '../typography';
@@ -32,84 +32,91 @@ export interface MenuItemProps extends Omit<BoxProps, 'children' | 'className' |
   style?: CSSProperties;
 }
 
-const MenuItem: GenericComponent<MenuItemProps> = ({
-  onClick,
-  disabled = false,
-  icon,
-  caption,
-  children,
-  className = '',
-  style,
-  destructive = false,
-  element = 'button',
-  label,
-  selected = false,
-  ...others
-}) => {
-  const handleClick = (event: MouseEvent) => {
-    if (onClick && !disabled) {
-      onClick(event);
-    }
-  };
-
-  const classNames = cx(
-    theme['menu-item'],
+const MenuItem: GenericComponent<MenuItemProps> = forwardRef<HTMLElement, MenuItemProps>(
+  (
     {
-      [theme['is-selected']]: selected,
-      [theme['is-disabled']]: disabled,
+      onClick,
+      disabled = false,
+      icon,
+      caption,
+      children,
+      className = '',
+      style,
+      destructive = false,
+      element = 'button',
+      label,
+      selected = false,
+      ...others
     },
-    className,
-  );
+    ref,
+  ) => {
+    const handleClick = (event: MouseEvent) => {
+      if (onClick && !disabled) {
+        onClick(event);
+      }
+    };
+
+    const classNames = cx(
+      theme['menu-item'],
+      {
+        [theme['is-selected']]: selected,
+        [theme['is-disabled']]: disabled,
+      },
+      className,
+    );
 
-  const color = destructive ? 'ruby' : disabled ? 'neutral' : 'teal';
-  const tint = disabled && destructive ? 'light' : disabled || destructive ? 'dark' : 'darkest';
+    const color = destructive ? 'ruby' : disabled ? 'neutral' : 'teal';
+    const tint = disabled && destructive ? 'light' : disabled || destructive ? 'dark' : 'darkest';
 
-  const boxProps = pickBoxProps(others);
-  const restProps = omitBoxProps(others);
+    const boxProps = pickBoxProps(others);
+    const restProps = omitBoxProps(others);
 
-  return (
-    <Box {...boxProps} data-teamleader-ui="menu-item" display="flex" element="li">
-      <Box
-        onClick={handleClick}
-        alignItems="center"
-        className={classNames}
-        style={style}
-        disabled={disabled}
-        display="flex"
-        element={element}
-        flex="1 1 auto"
-        paddingHorizontal={3}
-        paddingVertical={2}
-        textAlign="left"
-        {...(element === 'a' && disabled && { tabIndex: -1 })}
-        {...restProps}
-      >
-        {icon && (
-          <Icon color={color} tint={tint} marginRight={3}>
-            {icon}
-          </Icon>
-        )}
+    return (
+      <Box {...boxProps} data-teamleader-ui="menu-item" display="flex" element="li" ref={ref}>
         <Box
+          onClick={handleClick}
+          alignItems="center"
+          className={classNames}
+          style={style}
+          disabled={disabled}
+          display="flex"
+          element={element}
           flex="1 1 auto"
-          className={cx({
-            [theme['menu-item-text-container']]: element === 'a',
-          })}
+          paddingHorizontal={3}
+          paddingVertical={2}
+          textAlign="left"
+          {...(element === 'a' && disabled && { tabIndex: -1 })}
+          {...restProps}
         >
-          {children}
-          {label && (
-            <TextBody color={color} tint={tint}>
-              {label}
-            </TextBody>
-          )}
-          {caption && (
-            <TextBody color="neutral" tint="darkest">
-              {caption}
-            </TextBody>
+          {icon && (
+            <Icon color={color} tint={tint} marginRight={3}>
+              {icon}
+            </Icon>
           )}
+          <Box
+            flex="1 1 auto"
+            className={cx({
+              [theme['menu-item-text-container']]: element === 'a',
+            })}
+          >
+            {children}
+            {label && (
+              <TextBody color={color} tint={tint}>
+                {label}
+              </TextBody>
+            )}
+            {caption && (
+              <TextBody color="neutral" tint="darkest">
+                {caption}
+              </TextBody>
+            )}
+          </Box>
         </Box>
       </Box>
-    </Box>
-  );
-};
+    );
+  },
+);
+
+MenuItem.displayName = 'MenuItem';
 
 export default MenuItem;
diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
index cf7750cb9..7ac5ca07d 100644
--- a/src/components/message/Message.tsx
+++ b/src/components/message/Message.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import {
   IconBellMediumOutline,
   IconCheckmarkBadgedMediumFilled,
@@ -71,76 +71,70 @@ export interface MessageProps extends Omit<BoxProps, 'children'> {
   title?: React.ReactNode;
 }
 
-const Message: GenericComponent<MessageProps> = ({
-  children,
-  inline,
-  onClose,
-  primaryAction,
-  secondaryAction,
-  showIcon,
-  status = 'info',
-  title,
-  ...others
-}) => {
-  const hasActions = Boolean(primaryAction || secondaryAction);
-  const IconToRender = iconMap[status];
+const Message: GenericComponent<MessageProps> = forwardRef<HTMLElement, MessageProps>(
+  ({ children, inline, onClose, primaryAction, secondaryAction, showIcon, status = 'info', title, ...others }, ref) => {
+    const hasActions = Boolean(primaryAction || secondaryAction);
+    const IconToRender = iconMap[status];
 
-  return (
-    <Box data-teamleader-ui="message" {...others} display={inline ? 'inline-flex' : 'flex'}>
-      {status && (
+    return (
+      <Box data-teamleader-ui="message" {...others} display={inline ? 'inline-flex' : 'flex'} ref={ref}>
+        {status && (
+          <Box
+            backgroundColor={backgroundColorMap[status]}
+            backgroundTint={backgroundTintMap[status]}
+            borderBottomLeftRadius="rounded"
+            borderTopLeftRadius="rounded"
+            paddingHorizontal={showIcon ? 2 : 1}
+            paddingVertical={4}
+          >
+            {showIcon && (
+              <Icon color={iconColorMap[status]} tint={iconTintMap[status]}>
+                <IconToRender />
+              </Icon>
+            )}
+          </Box>
+        )}
         <Box
-          backgroundColor={backgroundColorMap[status]}
-          backgroundTint={backgroundTintMap[status]}
-          borderBottomLeftRadius="rounded"
-          borderTopLeftRadius="rounded"
-          paddingHorizontal={showIcon ? 2 : 1}
-          paddingVertical={4}
+          backgroundColor="neutral"
+          backgroundTint="lightest"
+          borderColor="neutral"
+          borderTint="normal"
+          borderLeftWidth={status ? 0 : 1}
+          borderTopWidth={1}
+          borderRightWidth={1}
+          borderBottomWidth={1}
+          borderBottomRightRadius="rounded"
+          borderTopRightRadius="rounded"
+          borderBottomLeftRadius={status ? 'square' : 'rounded'}
+          borderTopLeftRadius={status ? 'square' : 'rounded'}
+          flex={1}
+          display="flex"
         >
-          {showIcon && (
-            <Icon color={iconColorMap[status]} tint={iconTintMap[status]}>
-              <IconToRender />
-            </Icon>
-          )}
-        </Box>
-      )}
-      <Box
-        backgroundColor="neutral"
-        backgroundTint="lightest"
-        borderColor="neutral"
-        borderTint="normal"
-        borderLeftWidth={status ? 0 : 1}
-        borderTopWidth={1}
-        borderRightWidth={1}
-        borderBottomWidth={1}
-        borderBottomRightRadius="rounded"
-        borderTopRightRadius="rounded"
-        borderBottomLeftRadius={status ? 'square' : 'rounded'}
-        borderTopLeftRadius={status ? 'square' : 'rounded'}
-        flex={1}
-        display="flex"
-      >
-        <Box flex={1} paddingLeft={status ? 3 : 4} paddingRight={4} paddingVertical={4}>
-          {title && (
-            <Heading3 color="teal" marginBottom={2}>
-              {title}
-            </Heading3>
-          )}
-          {children}
-          {hasActions && (
-            <ButtonGroup display="flex" justifyContent="flex-end" marginTop={4}>
-              {secondaryAction && <Button level="link" size="small" {...secondaryAction} />}
-              {primaryAction && <Button size="small" {...primaryAction} />}
-            </ButtonGroup>
+          <Box flex={1} paddingLeft={status ? 3 : 4} paddingRight={4} paddingVertical={4}>
+            {title && (
+              <Heading3 color="teal" marginBottom={2}>
+                {title}
+              </Heading3>
+            )}
+            {children}
+            {hasActions && (
+              <ButtonGroup display="flex" justifyContent="flex-end" marginTop={4}>
+                {secondaryAction && <Button level="link" size="small" {...secondaryAction} />}
+                {primaryAction && <Button size="small" {...primaryAction} />}
+              </ButtonGroup>
+            )}
+          </Box>
+          {onClose && (
+            <Box paddingVertical={4} paddingRight={3}>
+              <IconButton icon={<IconCloseMediumOutline />} marginLeft={-2} marginTop={-1} onClick={onClose} />
+            </Box>
           )}
         </Box>
-        {onClose && (
-          <Box paddingVertical={4} paddingRight={3}>
-            <IconButton icon={<IconCloseMediumOutline />} marginLeft={-2} marginTop={-1} onClick={onClose} />
-          </Box>
-        )}
       </Box>
-    </Box>
-  );
-};
+    );
+  },
+);
+
+Message.displayName = 'Message';
 
 export default Message;
diff --git a/src/components/overviewPage/OverviewPage.tsx b/src/components/overviewPage/OverviewPage.tsx
index 6edabc120..aa29b733b 100644
--- a/src/components/overviewPage/OverviewPage.tsx
+++ b/src/components/overviewPage/OverviewPage.tsx
@@ -1,11 +1,11 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import OverviewPageBody, { OverviewPageBodyProps } from './OverviewPageBody';
 import OverviewPageHeader, { OverviewPageHeaderProps } from './OverviewPageHeader';
 import Box from '../box';
 import { BoxProps } from '../box/Box';
 import { GenericComponent } from '../../@types/types';
 
-export interface OverviewPageProps extends Omit<BoxProps, 'children'> {
+export interface OverviewPageProps extends Omit<BoxProps, 'children' | 'ref'> {
   children: ReactNode;
 }
 
@@ -14,17 +14,22 @@ interface OverviewPageComponent extends GenericComponent<OverviewPageProps> {
   Header: GenericComponent<OverviewPageHeaderProps>;
 }
 
-const OverviewPage: OverviewPageComponent = ({ children, ...others }) => {
-  return (
-    <Box data-teamleader-ui="overview-page" {...others}>
-      {children}
-    </Box>
-  );
-};
+const OverviewPage: GenericComponent<OverviewPageProps> = forwardRef<HTMLElement, OverviewPageProps>(
+  ({ children, ...others }, ref) => {
+    return (
+      <Box data-teamleader-ui="overview-page" {...others} ref={ref}>
+        {children}
+      </Box>
+    );
+  },
+);
 
-OverviewPage.Body = OverviewPageBody;
-OverviewPage.Body.displayName = 'OverviewPage.Body';
-OverviewPage.Header = OverviewPageHeader;
-OverviewPage.Header.displayName = 'OverviewPage.Header';
+OverviewPage.displayName = 'OverviewPage';
 
-export default OverviewPage;
+// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
+const OverviewPageWithSubComponents = OverviewPage as OverviewPageComponent;
+
+OverviewPageWithSubComponents.Body = OverviewPageBody;
+OverviewPageWithSubComponents.Header = OverviewPageHeader;
+
+export default OverviewPageWithSubComponents;
diff --git a/src/components/overviewPage/OverviewPageBody.tsx b/src/components/overviewPage/OverviewPageBody.tsx
index 6d51d33c3..ef21af08f 100644
--- a/src/components/overviewPage/OverviewPageBody.tsx
+++ b/src/components/overviewPage/OverviewPageBody.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import { BoxProps } from '../box/Box';
 import Container from '../container';
@@ -7,12 +7,16 @@ export interface OverviewPageBodyProps extends Omit<BoxProps, 'children'> {
   children: ReactNode;
 }
 
-const OverviewPageBody: GenericComponent<OverviewPageBodyProps> = ({ children, ...others }) => {
-  return (
-    <Container data-teamleader-ui="overview-page-body" paddingBottom={8} {...others}>
-      {children}
-    </Container>
-  );
-};
+const OverviewPageBody: GenericComponent<OverviewPageBodyProps> = forwardRef<HTMLElement, OverviewPageBodyProps>(
+  ({ children, ...others }, ref) => {
+    return (
+      <Container data-teamleader-ui="overview-page-body" paddingBottom={8} {...others} ref={ref}>
+        {children}
+      </Container>
+    );
+  },
+);
+
+OverviewPageBody.displayName = 'OverviewPage.Body';
 
 export default OverviewPageBody;
diff --git a/src/components/overviewPage/OverviewPageHeader.tsx b/src/components/overviewPage/OverviewPageHeader.tsx
index e9935cda5..b4fa35381 100644
--- a/src/components/overviewPage/OverviewPageHeader.tsx
+++ b/src/components/overviewPage/OverviewPageHeader.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import Box from '../box';
 import { BoxProps } from '../box/Box';
@@ -10,20 +10,25 @@ export interface OverviewPageHeaderProps extends Omit<BoxProps, 'children'> {
   title: ReactNode;
 }
 
-const OverviewPageHeader: GenericComponent<OverviewPageHeaderProps> = ({ children, title, ...others }) => {
-  return (
-    <Container
-      data-teamleader-ui="overview-page-header"
-      {...others}
-      display="flex"
-      marginBottom={5}
-      paddingTop={7}
-      justifyContent="space-between"
-    >
-      <Heading1 color="teal">{title}</Heading1>
-      {children && <Box>{children}</Box>}
-    </Container>
-  );
-};
+const OverviewPageHeader: GenericComponent<OverviewPageHeaderProps> = forwardRef<HTMLElement, OverviewPageHeaderProps>(
+  ({ children, title, ...others }, ref) => {
+    return (
+      <Container
+        data-teamleader-ui="overview-page-header"
+        {...others}
+        display="flex"
+        marginBottom={5}
+        paddingTop={7}
+        justifyContent="space-between"
+        ref={ref}
+      >
+        <Heading1 color="teal">{title}</Heading1>
+        {children && <Box>{children}</Box>}
+      </Container>
+    );
+  },
+);
+
+OverviewPageHeader.displayName = 'OverviewPage.Header';
 
 export default OverviewPageHeader;
diff --git a/src/components/pagination/Pagination.tsx b/src/components/pagination/Pagination.tsx
index 86df07dc2..4914a15d2 100644
--- a/src/components/pagination/Pagination.tsx
+++ b/src/components/pagination/Pagination.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import Box from '../box';
 import { TextBody } from '../typography';
 import { IconChevronLeftMediumOutline, IconChevronRightMediumOutline } from '@teamleader/ui-icons';
@@ -24,91 +24,88 @@ export interface PaginationProps extends Omit<BoxProps, 'className' | 'children'
   children: (args: ChildrenFunctionArgument) => ReactNode;
 }
 
-const Pagination: GenericComponent<PaginationProps> = ({
-  className,
-  currentPage = 1,
-  maxNumPagesVisible = 7,
-  numPages,
-  children,
-  ...others
-}) => {
-  if (numPages < 2) {
-    return null;
-  }
+const Pagination: GenericComponent<PaginationProps> = forwardRef<HTMLElement, PaginationProps>(
+  ({ className, currentPage = 1, maxNumPagesVisible = 7, numPages, children, ...others }, ref) => {
+    if (numPages < 2) {
+      return null;
+    }
+
+    const classNames = cx(theme['pagination'], className);
+    const iterator = [currentPage];
 
-  const classNames = cx(theme['pagination'], className);
-  const iterator = [currentPage];
+    let counter = 0;
 
-  let counter = 0;
+    while (iterator.length < maxNumPagesVisible && iterator.length < numPages) {
+      if (counter % 2 === 0 && iterator[0] !== 1) {
+        iterator.unshift(iterator[0] - 1);
+      } else if (counter % 2 === 1 && iterator[iterator.length - 1] !== numPages) {
+        iterator.push(iterator[iterator.length - 1] + 1);
+      }
 
-  while (iterator.length < maxNumPagesVisible && iterator.length < numPages) {
-    if (counter % 2 === 0 && iterator[0] !== 1) {
-      iterator.unshift(iterator[0] - 1);
-    } else if (counter % 2 === 1 && iterator[iterator.length - 1] !== numPages) {
-      iterator.push(iterator[iterator.length - 1] + 1);
+      counter++;
     }
 
-    counter++;
-  }
+    // make sure the first and the last item are the first and the last page
+    iterator[0] = 1;
+    iterator[iterator.length - 1] = numPages;
 
-  // make sure the first and the last item are the first and the last page
-  iterator[0] = 1;
-  iterator[iterator.length - 1] = numPages;
+    // should we replace the 2nd and 2nd last by ellipsis?
+    let firstEllipsisIndex: number | null = null;
+    let secondEllipsisIndex: number | null = null;
 
-  // should we replace the 2nd and 2nd last by ellipsis?
-  let firstEllipsisIndex: number | null = null;
-  let secondEllipsisIndex: number | null = null;
+    if (iterator.length > 1 && iterator[1] !== 2) {
+      firstEllipsisIndex = 1;
+    }
+    if (iterator.length > 1 && iterator[iterator.length - 2] !== numPages - 1) {
+      secondEllipsisIndex = iterator.length - 2;
+    }
 
-  if (iterator.length > 1 && iterator[1] !== 2) {
-    firstEllipsisIndex = 1;
-  }
-  if (iterator.length > 1 && iterator[iterator.length - 2] !== numPages - 1) {
-    secondEllipsisIndex = iterator.length - 2;
-  }
+    return (
+      <Box data-teamleader-ui="pagination" className={classNames} element="nav" {...others} ref={ref}>
+        <ul className={theme['list']}>
+          <li className={cx(theme['list-item'], theme['list-item__arrowed'])}>
+            {children({
+              number: currentPage - 1,
+              isActive: currentPage === 1,
+              icon: <IconChevronLeftMediumOutline />,
+              iconPlacement: 'left',
+            })}
+          </li>
+          {iterator.map((page, index) => {
+            const isActive = page === currentPage;
+            const isEllipsis = firstEllipsisIndex === index || secondEllipsisIndex === index;
 
-  return (
-    <Box data-teamleader-ui="pagination" className={classNames} element="nav" {...others}>
-      <ul className={theme['list']}>
-        <li className={cx(theme['list-item'], theme['list-item__arrowed'])}>
-          {children({
-            number: currentPage - 1,
-            isActive: currentPage === 1,
-            icon: <IconChevronLeftMediumOutline />,
-            iconPlacement: 'left',
+            return (
+              <li key={page} className={theme['list-item']}>
+                {isEllipsis ? (
+                  <TextBody className={theme['ellipsis']} element="span">
+                    ...
+                  </TextBody>
+                ) : (
+                  children({
+                    number: page,
+                    text: String(page),
+                    isActive,
+                    className: isActive ? theme['is-current'] : '',
+                  })
+                )}
+              </li>
+            );
           })}
-        </li>
-        {iterator.map((page, index) => {
-          const isActive = page === currentPage;
-          const isEllipsis = firstEllipsisIndex === index || secondEllipsisIndex === index;
+          <li className={cx(theme['list-item'], theme['list-item__arrowed'])}>
+            {children({
+              number: currentPage + 1,
+              isActive: currentPage === numPages,
+              icon: <IconChevronRightMediumOutline />,
+              iconPlacement: 'right',
+            })}
+          </li>
+        </ul>
+      </Box>
+    );
+  },
+);
 
-          return (
-            <li key={page} className={theme['list-item']}>
-              {isEllipsis ? (
-                <TextBody className={theme['ellipsis']} element="span">
-                  ...
-                </TextBody>
-              ) : (
-                children({
-                  number: page,
-                  text: String(page),
-                  isActive,
-                  className: isActive ? theme['is-current'] : '',
-                })
-              )}
-            </li>
-          );
-        })}
-        <li className={cx(theme['list-item'], theme['list-item__arrowed'])}>
-          {children({
-            number: currentPage + 1,
-            isActive: currentPage === numPages,
-            icon: <IconChevronRightMediumOutline />,
-            iconPlacement: 'right',
-          })}
-        </li>
-      </ul>
-    </Box>
-  );
-};
+Pagination.displayName = 'Pagination';
 
 export default Pagination;
diff --git a/src/components/progressTracker/ProgressStep.tsx b/src/components/progressTracker/ProgressStep.tsx
index a1eb1f1c8..1a7b38aef 100644
--- a/src/components/progressTracker/ProgressStep.tsx
+++ b/src/components/progressTracker/ProgressStep.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import theme from './theme.css';
 
 import { GenericComponent } from '../../@types/types';
@@ -21,32 +21,27 @@ export interface ProgressStepProps {
   onClick?: () => void;
 }
 
-const ProgressStep: GenericComponent<ProgressStepProps> = ({
-  label,
-  meta,
-  active = false,
-  completed = false,
-  color = '',
-  onClick,
-}: ProgressStepProps) => {
-  const classNames = cx(theme['step'], {
-    [theme['is-active']]: active,
-    [theme['is-completed']]: completed,
-    [theme['is-clickable']]: !!onClick,
-    [theme['has-meta']]: !!meta,
-    [theme['custom-color']]: !!color,
-  });
-  return (
-    <Box className={classNames} style={{ '--step-color': color } as React.CSSProperties}>
-      <div className={theme['step-label-holder']}>
-        <TextSmall className={theme['step-label']}>{label}</TextSmall>
-        {meta && <TextSmall className={theme['step-meta']}>{meta}</TextSmall>}
-      </div>
-      <span className={theme['status-bullet-halo']} onClick={onClick} />
-      <span className={theme['status-bullet']} onClick={onClick} />
-    </Box>
-  );
-};
+const ProgressStep: GenericComponent<ProgressStepProps> = forwardRef<HTMLElement, ProgressStepProps>(
+  ({ label, meta, active = false, completed = false, color = '', onClick }: ProgressStepProps, ref) => {
+    const classNames = cx(theme['step'], {
+      [theme['is-active']]: active,
+      [theme['is-completed']]: completed,
+      [theme['is-clickable']]: !!onClick,
+      [theme['has-meta']]: !!meta,
+      [theme['custom-color']]: !!color,
+    });
+    return (
+      <Box className={classNames} style={{ '--step-color': color } as React.CSSProperties} ref={ref}>
+        <div className={theme['step-label-holder']}>
+          <TextSmall className={theme['step-label']}>{label}</TextSmall>
+          {meta && <TextSmall className={theme['step-meta']}>{meta}</TextSmall>}
+        </div>
+        <span className={theme['status-bullet-halo']} onClick={onClick} />
+        <span className={theme['status-bullet']} onClick={onClick} />
+      </Box>
+    );
+  },
+);
 
 ProgressStep.displayName = 'ProgressTracker.ProgressStep';
 
diff --git a/src/components/progressTracker/ProgressTracker.tsx b/src/components/progressTracker/ProgressTracker.tsx
index 6e516286e..9b8831d2d 100644
--- a/src/components/progressTracker/ProgressTracker.tsx
+++ b/src/components/progressTracker/ProgressTracker.tsx
@@ -1,13 +1,13 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import cx from 'classnames';
 import theme from './theme.css';
 
-import Box from '../box';
-import ProgressStep from './ProgressStep';
+import Box, { BoxProps } from '../box';
+import ProgressStep, { ProgressStepProps } from './ProgressStep';
 import { GenericComponent } from '../../@types/types';
 import { COLORS } from '../../constants';
 
-export interface ProgressTrackerProps {
+export interface ProgressTrackerProps extends Omit<BoxProps, 'children' | 'ref'> {
   /** Whether or not all steps are completed */
   done?: boolean;
   /** The number of the step which is currently active */
@@ -22,35 +22,38 @@ export interface ProgressTrackerProps {
   labelPosition?: 'top' | 'alternating' | 'bottom';
 }
 
-const ProgressTracker: GenericComponent<ProgressTrackerProps> & { ProgressStep: typeof ProgressStep } = ({
-  color = 'mint',
-  children,
-  currentStep = 0,
-  done,
-  labelPosition = 'top',
-  activeStepColor,
-}: ProgressTrackerProps) => {
-  const classNames = cx(theme['tracker'], theme[color], theme[`tracker-${labelPosition}`]);
-  return (
-    <Box data-teamleader-ui="progress-tracker" className={classNames}>
-      {React.Children.map(children, (child, index) => {
-        const activeStep = Math.max(0, currentStep);
-        const isActiveStep = index === activeStep;
-        const childProps = React.isValidElement(child) && child.props;
-        const hasColoredActiveStep = isActiveStep && activeStepColor && !done;
-        return (
-          <ProgressStep
-            active={done ? false : isActiveStep}
-            completed={done || index < activeStep}
-            color={hasColoredActiveStep ? activeStepColor : ''}
-            {...childProps}
-          />
-        );
-      })}
-    </Box>
-  );
-};
+interface ProgressTrackerComponent extends GenericComponent<ProgressTrackerProps> {
+  ProgressStep: GenericComponent<ProgressStepProps>;
+}
+
+const ProgressTracker: GenericComponent<ProgressTrackerProps> = forwardRef<HTMLElement, ProgressTrackerProps>(
+  ({ color = 'mint', children, currentStep = 0, done, labelPosition = 'top', activeStepColor }, ref) => {
+    const classNames = cx(theme['tracker'], theme[color], theme[`tracker-${labelPosition}`]);
+    return (
+      <Box data-teamleader-ui="progress-tracker" className={classNames} ref={ref}>
+        {React.Children.map(children, (child, index) => {
+          const activeStep = Math.max(0, currentStep);
+          const isActiveStep = index === activeStep;
+          const childProps = React.isValidElement(child) && child.props;
+          const hasColoredActiveStep = isActiveStep && activeStepColor && !done;
+          return (
+            <ProgressStep
+              active={done ? false : isActiveStep}
+              completed={done || index < activeStep}
+              color={hasColoredActiveStep ? activeStepColor : ''}
+              {...childProps}
+            />
+          );
+        })}
+      </Box>
+    );
+  },
+);
+
+ProgressTracker.displayName = 'ProgressTracker';
 
-ProgressTracker.ProgressStep = ProgressStep;
+// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
+const ProgressTrackerWithSubComponents = ProgressTracker as ProgressTrackerComponent;
+ProgressTrackerWithSubComponents.ProgressStep = ProgressStep;
 
-export default ProgressTracker;
+export default ProgressTrackerWithSubComponents;
diff --git a/src/components/radio/RadioButton.tsx b/src/components/radio/RadioButton.tsx
index 8b1a35cb6..d4484bb57 100644
--- a/src/components/radio/RadioButton.tsx
+++ b/src/components/radio/RadioButton.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import omit from 'lodash.omit';
-import React, { useRef, MouseEvent, ReactNode } from 'react';
+import React, { useRef, MouseEvent, ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import Box, { omitBoxProps, pickBoxProps } from '../box';
 import { TextBodyCompact, TextDisplay, TextSmall } from '../typography';
@@ -22,75 +22,83 @@ export interface RadioButtonProps extends Omit<BoxProps, 'className' | 'children
   value: string | boolean;
 }
 
-const RadioButton: GenericComponent<RadioButtonProps> = ({
-  checked = false,
-  children,
-  className,
-  disabled = false,
-  name,
-  onChange,
-  onMouseEnter,
-  onMouseLeave,
-  label,
-  size = 'medium',
-  ...others
-}) => {
-  const inputNode = useRef<HTMLInputElement | null>(null);
-  const TextElement = size === 'small' ? TextSmall : size === 'medium' ? TextBodyCompact : TextDisplay;
-
-  const restProps = omit(others, ['onChange']);
-  const boxProps = pickBoxProps(restProps);
-  const inputProps = omitBoxProps(restProps);
-
-  const classNames = cx(
-    theme['radiobutton'],
-    theme[`is-${size}`],
+const RadioButton: GenericComponent<RadioButtonProps> = forwardRef<HTMLElement, RadioButtonProps>(
+  (
     {
-      [theme['is-checked']]: checked,
-      [theme['is-disabled']]: disabled,
+      checked = false,
+      children,
+      className,
+      disabled = false,
+      name,
+      onChange,
+      onMouseEnter,
+      onMouseLeave,
+      label,
+      size = 'medium',
+      ...others
     },
-    className,
-  );
+    ref,
+  ) => {
+    const inputNode = useRef<HTMLInputElement | null>(null);
+    const TextElement = size === 'small' ? TextSmall : size === 'medium' ? TextBodyCompact : TextDisplay;
+
+    const restProps = omit(others, ['onChange']);
+    const boxProps = pickBoxProps(restProps);
+    const inputProps = omitBoxProps(restProps);
+
+    const classNames = cx(
+      theme['radiobutton'],
+      theme[`is-${size}`],
+      {
+        [theme['is-checked']]: checked,
+        [theme['is-disabled']]: disabled,
+      },
+      className,
+    );
+
+    const handleToggle = (event: React.MouseEvent) => {
+      if (!disabled && onChange) {
+        onChange(!checked, event);
+      }
+    };
 
-  const handleToggle = (event: React.MouseEvent) => {
-    if (!disabled && onChange) {
-      onChange(!checked, event);
-    }
-  };
+    return (
+      <Box
+        element="label"
+        data-teamleader-ui="radiobutton"
+        className={classNames}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        {...boxProps}
+        ref={ref}
+      >
+        <input
+          className={theme['input']}
+          type="radio"
+          checked={checked}
+          disabled={disabled}
+          onClick={handleToggle}
+          readOnly
+          ref={inputNode}
+          name={name}
+          {...inputProps}
+        />
+        <span className={theme['shape']} />
+        {(label || children) && (
+          <span className={theme['label']}>
+            {label && (
+              <TextElement element="span" color={disabled ? 'neutral' : 'teal'}>
+                {label}
+              </TextElement>
+            )}
+            {children}
+          </span>
+        )}
+      </Box>
+    );
+  },
+);
 
-  return (
-    <Box
-      element="label"
-      data-teamleader-ui="radiobutton"
-      className={classNames}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      {...boxProps}
-    >
-      <input
-        className={theme['input']}
-        type="radio"
-        checked={checked}
-        disabled={disabled}
-        onClick={handleToggle}
-        readOnly
-        ref={inputNode}
-        name={name}
-        {...inputProps}
-      />
-      <span className={theme['shape']} />
-      {(label || children) && (
-        <span className={theme['label']}>
-          {label && (
-            <TextElement element="span" color={disabled ? 'neutral' : 'teal'}>
-              {label}
-            </TextElement>
-          )}
-          {children}
-        </span>
-      )}
-    </Box>
-  );
-};
+RadioButton.displayName = 'RadioButton';
 
 export default RadioButton;
diff --git a/src/components/splitButton/SplitButton.tsx b/src/components/splitButton/SplitButton.tsx
index 05511b4d2..59378eaab 100644
--- a/src/components/splitButton/SplitButton.tsx
+++ b/src/components/splitButton/SplitButton.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactElement, ReactNode, useRef, useState } from 'react';
+import React, { MouseEvent, ReactElement, ReactNode, forwardRef, useRef, useState } from 'react';
 import Box, { pickBoxProps } from '../box';
 import Button from '../button';
 import ButtonGroup from '../buttonGroup';
@@ -38,104 +38,109 @@ export interface SplitButtonProps extends Omit<BoxProps, 'children' | 'size'> {
   };
 }
 
-const SplitButton: GenericComponent<SplitButtonProps> = ({
-  children,
-  level = 'primary',
-  size = 'medium',
-  onButtonClick,
-  onSecondaryButtonClick,
-  disabled,
-  processing,
-  popoverProps,
-  ...others
-}) => {
-  const [popoverActive, setPopoverActive] = useState<boolean>(false);
-  const popoverAnchorEl = useRef<HTMLElement | null>(null);
+const SplitButton: GenericComponent<SplitButtonProps> = forwardRef<HTMLElement, SplitButtonProps>(
+  (
+    {
+      children,
+      level = 'primary',
+      size = 'medium',
+      onButtonClick,
+      onSecondaryButtonClick,
+      disabled,
+      processing,
+      popoverProps,
+      ...others
+    },
+    ref,
+  ) => {
+    const [popoverActive, setPopoverActive] = useState<boolean>(false);
+    const popoverAnchorEl = useRef<HTMLElement | null>(null);
 
-  const handleMainButtonClick = (event: MouseEvent<HTMLElement>) => {
-    onButtonClick(event);
-  };
+    const handleMainButtonClick = (event: MouseEvent<HTMLElement>) => {
+      onButtonClick(event);
+    };
 
-  const handleSecondaryButtonClick = (event: MouseEvent<HTMLElement>) => {
-    setPopoverActive(true);
-    popoverAnchorEl.current = event.currentTarget;
-    onSecondaryButtonClick && onSecondaryButtonClick(event);
-  };
+    const handleSecondaryButtonClick = (event: MouseEvent<HTMLElement>) => {
+      setPopoverActive(true);
+      popoverAnchorEl.current = event.currentTarget;
+      onSecondaryButtonClick && onSecondaryButtonClick(event);
+    };
 
-  const handleMenuItemClick = (child: ReactElement, event: MouseEvent) => {
-    const childProps = child.props;
-    setPopoverActive(false);
-    childProps.onClick(event);
-  };
+    const handleMenuItemClick = (child: ReactElement, event: MouseEvent) => {
+      const childProps = child.props;
+      setPopoverActive(false);
+      childProps.onClick(event);
+    };
 
-  const handleCloseClick = () => {
-    setPopoverActive(false);
-  };
+    const handleCloseClick = () => {
+      setPopoverActive(false);
+    };
 
-  const boxProps = {
-    ...pickBoxProps(others),
-  };
+    const boxProps = {
+      ...pickBoxProps(others),
+    };
 
-  let buttonLabel: string | undefined;
-  if (Array.isArray(children)) {
-    const childrenArray: Array<any> = children;
+    let buttonLabel: string | undefined;
+    if (Array.isArray(children)) {
+      const childrenArray: Array<any> = children;
 
-    if (childrenArray.length && isReactElement(childrenArray[0])) {
-      buttonLabel = childrenArray[0].props.label;
+      if (childrenArray.length && isReactElement(childrenArray[0])) {
+        buttonLabel = childrenArray[0].props.label;
+      }
     }
-  }
 
-  return (
-    <Box display="flex" justifyContent="center" {...boxProps} data-teamleader-ui="split-menu">
-      {processing ? (
-        <Button
-          label={buttonLabel}
-          level={level}
-          size={size}
-          processing
-          className={theme[`split-button-${size}--processing`]}
-        />
-      ) : (
-        <ButtonGroup segmented>
-          <Button label={buttonLabel} level={level} size={size} disabled={disabled} onClick={handleMainButtonClick} />
+    return (
+      <Box display="flex" justifyContent="center" {...boxProps} data-teamleader-ui="split-menu" ref={ref}>
+        {processing ? (
           <Button
-            icon={<IconChevronDownSmallOutline />}
+            label={buttonLabel}
             level={level}
             size={size}
-            disabled={disabled}
-            onClick={handleSecondaryButtonClick}
+            processing
+            className={theme[`split-button-${size}--processing`]}
           />
-        </ButtonGroup>
-      )}
-      <Popover
-        active={popoverActive}
-        anchorEl={popoverAnchorEl?.current}
-        backdrop="transparent"
-        lockScroll={false}
-        onEscKeyDown={handleCloseClick}
-        onOverlayClick={handleCloseClick}
-        position="start"
-        {...popoverProps}
-      >
-        <Menu>
-          {React.Children.map(children, (child) => {
-            if (!React.isValidElement(child) || !isComponentOfType(MenuItem, child)) {
-              return child;
-            }
+        ) : (
+          <ButtonGroup segmented>
+            <Button label={buttonLabel} level={level} size={size} disabled={disabled} onClick={handleMainButtonClick} />
+            <Button
+              icon={<IconChevronDownSmallOutline />}
+              level={level}
+              size={size}
+              disabled={disabled}
+              onClick={handleSecondaryButtonClick}
+            />
+          </ButtonGroup>
+        )}
+        <Popover
+          active={popoverActive}
+          anchorEl={popoverAnchorEl?.current}
+          backdrop="transparent"
+          lockScroll={false}
+          onEscKeyDown={handleCloseClick}
+          onOverlayClick={handleCloseClick}
+          position="start"
+          {...popoverProps}
+        >
+          <Menu>
+            {React.Children.map(children, (child) => {
+              if (!React.isValidElement(child) || !isComponentOfType(MenuItem, child)) {
+                return child;
+              }
 
-            if (child.props.label === buttonLabel) {
-              return null;
-            }
+              if (child.props.label === buttonLabel) {
+                return null;
+              }
 
-            return React.cloneElement(child, {
-              onClick: (event: MouseEvent) => handleMenuItemClick(child, event),
-            });
-          })}
-        </Menu>
-      </Popover>
-    </Box>
-  );
-};
+              return React.cloneElement(child, {
+                onClick: (event: MouseEvent) => handleMenuItemClick(child, event),
+              });
+            })}
+          </Menu>
+        </Popover>
+      </Box>
+    );
+  },
+);
 
 SplitButton.displayName = 'SplitButton';
 
diff --git a/src/components/tab/TabGroup.tsx b/src/components/tab/TabGroup.tsx
index e4efef534..718187ad7 100644
--- a/src/components/tab/TabGroup.tsx
+++ b/src/components/tab/TabGroup.tsx
@@ -1,6 +1,6 @@
 import { IconChevronLeftSmallOutline, IconChevronRightSmallOutline } from '@teamleader/ui-icons';
 import cx from 'classnames';
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, forwardRef, useEffect, useRef, useState } from 'react';
 import ReactResizeDetector from 'react-resize-detector';
 import smoothScroll from 'smoothscroll-polyfill';
 import { GenericComponent } from '../../@types/types';
@@ -19,95 +19,100 @@ export interface TabGroupProps extends Omit<BoxProps, 'children'> {
   size?: Exclude<(typeof SIZES)[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
-const TabGroup: GenericComponent<TabGroupProps> = ({ children, className, size, ...others }) => {
-  const scrollContainerRef = useRef<HTMLElement>(null);
-  const activeTabRef = useRef<HTMLElement>(null);
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
+const TabGroup: GenericComponent<TabGroupProps> = forwardRef<HTMLElement, TabGroupProps>(
+  ({ children, className, size, ...others }, ref) => {
+    const scrollContainerRef = useRef<HTMLElement>(null);
+    const activeTabRef = useRef<HTMLElement>(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
 
-  const checkForScrollPosition = () => {
-    if (scrollContainerRef.current) {
-      const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+    const checkForScrollPosition = () => {
+      if (scrollContainerRef.current) {
+        const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
 
-      setCanScrollLeft(scrollLeft > 0);
-      setCanScrollRight(scrollLeft < scrollWidth - clientWidth);
-    }
-  };
+        setCanScrollLeft(scrollLeft > 0);
+        setCanScrollRight(scrollLeft < scrollWidth - clientWidth);
+      }
+    };
 
-  const scrollToActiveTab = () => {
-    if (activeTabRef.current) {
-      const { offsetLeft } = activeTabRef.current;
-      scrollContainerRef.current?.scrollTo({ left: offsetLeft - SCROLL_BUTTON_WIDTH });
-    }
-  };
-  const handleResize = () => {
-    scrollToActiveTab();
-    checkForScrollPosition();
-  };
+    const scrollToActiveTab = () => {
+      if (activeTabRef.current) {
+        const { offsetLeft } = activeTabRef.current;
+        scrollContainerRef.current?.scrollTo({ left: offsetLeft - SCROLL_BUTTON_WIDTH });
+      }
+    };
+    const handleResize = () => {
+      scrollToActiveTab();
+      checkForScrollPosition();
+    };
 
-  const handleScroll = () => {
-    checkForScrollPosition();
-  };
+    const handleScroll = () => {
+      checkForScrollPosition();
+    };
 
-  const scrollContainerBy = (distance: number) => {
-    scrollContainerRef.current?.scrollBy({ left: distance, behavior: 'smooth' });
-  };
+    const scrollContainerBy = (distance: number) => {
+      scrollContainerRef.current?.scrollBy({ left: distance, behavior: 'smooth' });
+    };
 
-  useEffect(() => {
-    smoothScroll.polyfill();
-    scrollContainerRef.current?.addEventListener('scroll', handleScroll);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    return () => scrollContainerRef.current?.removeEventListener('scroll', handleScroll);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    useEffect(() => {
+      smoothScroll.polyfill();
+      scrollContainerRef.current?.addEventListener('scroll', handleScroll);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      return () => scrollContainerRef.current?.removeEventListener('scroll', handleScroll);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
-  const classNames = cx(theme['tab-group'], className);
+    const classNames = cx(theme['tab-group'], className);
 
-  return (
-    <Box
-      backgroundColor="neutral"
-      backgroundTint="lightest"
-      data-teamleader-ui="tab-group"
-      className={classNames}
-      {...others}
-      display="flex"
-      paddingHorizontal={size === 'small' ? 2 : 0}
-    >
-      <Box className={theme['scroll-container']} display="flex" overflowX="scroll" ref={scrollContainerRef}>
-        {React.Children.map(children, (child) =>
-          React.isValidElement(child)
-            ? React.cloneElement(child, {
-                size,
-                ...(child.props.active && { ref: activeTabRef }),
-              })
-            : child,
+    return (
+      <Box
+        backgroundColor="neutral"
+        backgroundTint="lightest"
+        data-teamleader-ui="tab-group"
+        className={classNames}
+        {...others}
+        display="flex"
+        paddingHorizontal={size === 'small' ? 2 : 0}
+        ref={ref}
+      >
+        <Box className={theme['scroll-container']} display="flex" overflowX="scroll" ref={scrollContainerRef}>
+          {React.Children.map(children, (child) =>
+            React.isValidElement(child)
+              ? React.cloneElement(child, {
+                  size,
+                  ...(child.props.active && { ref: activeTabRef }),
+                })
+              : child,
+          )}
+        </Box>
+        {canScrollLeft && (
+          <Box className={theme['scroll-left-button-wrapper']}>
+            <IconButton
+              className={theme['scroll-button']}
+              icon={<IconChevronLeftSmallOutline />}
+              onClick={() => {
+                scrollContainerBy(-1 * SCROLL_DISTANCE);
+              }}
+            />
+          </Box>
+        )}
+        {canScrollRight && (
+          <Box className={theme['scroll-right-button-wrapper']}>
+            <IconButton
+              className={theme['scroll-button']}
+              icon={<IconChevronRightSmallOutline />}
+              onClick={() => {
+                scrollContainerBy(SCROLL_DISTANCE);
+              }}
+            />
+          </Box>
         )}
+        <ReactResizeDetector handleWidth onResize={handleResize} />
       </Box>
-      {canScrollLeft && (
-        <Box className={theme['scroll-left-button-wrapper']}>
-          <IconButton
-            className={theme['scroll-button']}
-            icon={<IconChevronLeftSmallOutline />}
-            onClick={() => {
-              scrollContainerBy(-1 * SCROLL_DISTANCE);
-            }}
-          />
-        </Box>
-      )}
-      {canScrollRight && (
-        <Box className={theme['scroll-right-button-wrapper']}>
-          <IconButton
-            className={theme['scroll-button']}
-            icon={<IconChevronRightSmallOutline />}
-            onClick={() => {
-              scrollContainerBy(SCROLL_DISTANCE);
-            }}
-          />
-        </Box>
-      )}
-      <ReactResizeDetector handleWidth onResize={handleResize} />
-    </Box>
-  );
-};
+    );
+  },
+);
+
+TabGroup.displayName = 'TabGroup';
 
 export default TabGroup;
diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx
index a2b8275d5..92d6f6c35 100644
--- a/src/components/tag/Tag.tsx
+++ b/src/components/tag/Tag.tsx
@@ -1,6 +1,6 @@
 import { IconCloseSmallOutline } from '@teamleader/ui-icons';
 import cx from 'classnames';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import { SIZES } from '../../constants';
 import Box from '../box';
@@ -20,33 +20,37 @@ export interface TagProps extends Omit<BoxProps, 'className' | 'size'> {
   size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
-const Tag: GenericComponent<TagProps> = ({ children, className, onRemoveClick, size = 'medium', ...others }) => {
-  const classNames = cx(theme[`is-${size}`], theme['wrapper'], className);
+const Tag: GenericComponent<TagProps> = forwardRef<HTMLElement, TagProps>(
+  ({ children, className, onRemoveClick, size = 'medium', ...others }, ref) => {
+    const classNames = cx(theme[`is-${size}`], theme['wrapper'], className);
 
-  const TextElement = size === 'small' ? UITextSmall : size === 'large' ? UITextDisplay : UITextBody;
+    const TextElement = size === 'small' ? UITextSmall : size === 'large' ? UITextDisplay : UITextBody;
 
-  return (
-    <Box {...others} className={classNames} data-teamleader-ui="tag" display="inline-flex">
-      <TextElement
-        color="teal"
-        marginLeft={size === 'small' ? 2 : 3}
-        marginRight={onRemoveClick ? 1 : size === 'small' ? 2 : 3}
-        marginVertical={size === 'small' ? 0 : 1}
-        maxLines={1}
-        tint="darkest"
-      >
-        {children}
-      </TextElement>
-      {onRemoveClick && (
-        <IconButton
-          className={theme['remove-button']}
-          flexShrink={0}
-          icon={<IconCloseSmallOutline />}
-          onClick={onRemoveClick}
-        />
-      )}
-    </Box>
-  );
-};
+    return (
+      <Box {...others} className={classNames} data-teamleader-ui="tag" display="inline-flex" ref={ref}>
+        <TextElement
+          color="teal"
+          marginLeft={size === 'small' ? 2 : 3}
+          marginRight={onRemoveClick ? 1 : size === 'small' ? 2 : 3}
+          marginVertical={size === 'small' ? 0 : 1}
+          maxLines={1}
+          tint="darkest"
+        >
+          {children}
+        </TextElement>
+        {onRemoveClick && (
+          <IconButton
+            className={theme['remove-button']}
+            flexShrink={0}
+            icon={<IconCloseSmallOutline />}
+            onClick={onRemoveClick}
+          />
+        )}
+      </Box>
+    );
+  },
+);
+
+Tag.displayName = 'Tag';
 
 export default Tag;
diff --git a/src/components/toast/Toast.tsx b/src/components/toast/Toast.tsx
index ed0aa3017..df16adeb4 100644
--- a/src/components/toast/Toast.tsx
+++ b/src/components/toast/Toast.tsx
@@ -1,7 +1,7 @@
 import { IconCloseMediumOutline } from '@teamleader/ui-icons';
 import uiUtilities from '@teamleader/ui-utilities';
 import cx from 'classnames';
-import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
+import React, { ReactElement, ReactNode, forwardRef, useEffect, useState } from 'react';
 import { GenericComponent } from '../../@types/types';
 import IconButton from '../iconButton';
 import Link from '../link';
@@ -32,108 +32,102 @@ export interface ToastProps {
   timeout?: number;
 }
 
-const Toast: GenericComponent<ToastProps> = ({
-  children,
-  className,
-  label,
-  processing,
-  timeout,
-  onTimeout,
-  link,
-  action,
-  actionLabel,
-  onClose,
-}) => {
-  const [currentTimeout, setCurrentTimeout] = useState<number | undefined>(undefined);
-  const clearCurrentTimeout = () => {
-    clearTimeout(currentTimeout);
-    setCurrentTimeout(undefined);
-  };
-  const scheduleTimeout = () => {
-    if (currentTimeout) {
-      clearCurrentTimeout();
-    }
+const Toast: GenericComponent<ToastProps> = forwardRef<HTMLDivElement, ToastProps>(
+  ({ children, className, label, processing, timeout, onTimeout, link, action, actionLabel, onClose }, ref) => {
+    const [currentTimeout, setCurrentTimeout] = useState<number | undefined>(undefined);
+    const clearCurrentTimeout = () => {
+      clearTimeout(currentTimeout);
+      setCurrentTimeout(undefined);
+    };
+    const scheduleTimeout = () => {
+      if (currentTimeout) {
+        clearCurrentTimeout();
+      }
 
-    setCurrentTimeout(
-      window.setTimeout(() => {
-        if (onTimeout) {
-          onTimeout();
-        }
+      setCurrentTimeout(
+        window.setTimeout(() => {
+          if (onTimeout) {
+            onTimeout();
+          }
 
+          clearCurrentTimeout();
+        }, timeout),
+      );
+    };
+    const handleMouseEnter = () => {
+      if (timeout) {
         clearCurrentTimeout();
-      }, timeout),
-    );
-  };
-  const handleMouseEnter = () => {
-    if (timeout) {
-      clearCurrentTimeout();
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (timeout) {
-      scheduleTimeout();
-    }
-  };
+      }
+    };
 
-  const renderCustomAction = () => {
-    return (
-      action && (
-        <Link className={theme['action-link']} onClick={action}>
-          {actionLabel}
-        </Link>
-      )
-    );
-  };
+    const handleMouseLeave = () => {
+      if (timeout) {
+        scheduleTimeout();
+      }
+    };
 
-  const renderCustomLink = () => {
-    return (
-      link && (
-        <TextBody>{React.cloneElement(link, { className: cx(link.props.className, theme['action-link']) })}</TextBody>
-      )
-    );
-  };
+    const renderCustomAction = () => {
+      return (
+        action && (
+          <Link className={theme['action-link']} onClick={action}>
+            {actionLabel}
+          </Link>
+        )
+      );
+    };
 
-  const renderCloseButton = () => {
-    return (
-      onClose && (
-        <IconButton
-          className={theme['action-button']}
-          icon={<IconCloseMediumOutline />}
-          color="white"
-          onClick={onClose}
-        />
-      )
-    );
-  };
+    const renderCustomLink = () => {
+      return (
+        link && (
+          <TextBody>{React.cloneElement(link, { className: cx(link.props.className, theme['action-link']) })}</TextBody>
+        )
+      );
+    };
 
-  useEffect(() => {
-    if (timeout) {
-      scheduleTimeout();
-    }
-    return () => {
-      clearCurrentTimeout();
+    const renderCloseButton = () => {
+      return (
+        onClose && (
+          <IconButton
+            className={theme['action-button']}
+            icon={<IconCloseMediumOutline />}
+            color="white"
+            onClick={onClose}
+          />
+        )
+      );
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [timeout]);
 
-  const classNames = cx(uiUtilities['reset-box-sizing'], uiUtilities['box-shadow-400'], theme['toast'], className);
+    useEffect(() => {
+      if (timeout) {
+        scheduleTimeout();
+      }
+      return () => {
+        clearCurrentTimeout();
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [timeout]);
+
+    const classNames = cx(uiUtilities['reset-box-sizing'], uiUtilities['box-shadow-400'], theme['toast'], className);
+
+    return (
+      <div
+        data-teamleader-ui="toast"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        className={classNames}
+        ref={ref}
+      >
+        {processing && <LoadingSpinner className={theme['spinner']} color="neutral" tint="lightest" />}
+        <TextBody className={theme['label']} color="neutral" tint="lightest" element="div">
+          {label}
+          {children}
+        </TextBody>
+        {renderCustomAction() || renderCustomLink() || renderCloseButton()}
+      </div>
+    );
+  },
+);
 
-  return (
-    <div
-      data-teamleader-ui="toast"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      className={classNames}
-    >
-      {processing && <LoadingSpinner className={theme['spinner']} color="neutral" tint="lightest" />}
-      <TextBody className={theme['label']} color="neutral" tint="lightest" element="div">
-        {label}
-        {children}
-      </TextBody>
-      {renderCustomAction() || renderCustomLink() || renderCloseButton()}
-    </div>
-  );
-};
+Toast.displayName = 'Toast';
 
 export default Toast;
diff --git a/src/components/toast/ToastContainer.tsx b/src/components/toast/ToastContainer.tsx
index 52e365373..918f089f8 100644
--- a/src/components/toast/ToastContainer.tsx
+++ b/src/components/toast/ToastContainer.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { CSSProperties, ReactElement, ReactFragment, ReactNode, ReactPortal } from 'react';
+import React, { CSSProperties, ReactElement, ReactFragment, ReactNode, ReactPortal, forwardRef } from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { GenericComponent } from '../../@types/types';
 import theme from './theme.css';
@@ -15,39 +15,43 @@ export interface ToastContainerProps {
 
 type AllowedChildrenTypes = ReactElement | ReactFragment | ReactPortal;
 
-const ToastContainer: GenericComponent<ToastContainerProps> = ({ children, className, style }) => {
-  const classNames = cx(theme['container'], className);
+const ToastContainer: GenericComponent<ToastContainerProps> = forwardRef<HTMLUListElement, ToastContainerProps>(
+  ({ children, className, style }, ref) => {
+    const classNames = cx(theme['container'], className);
 
-  if (!children) {
-    return null;
-  }
+    if (!children) {
+      return null;
+    }
 
-  return (
-    <ul className={classNames} style={style} data-teamleader-ui="toast-container">
-      <TransitionGroup component="li">
-        {React.Children.map<ReactElement, AllowedChildrenTypes>(children, (child, index) => {
-          return (
-            <CSSTransition
-              timeout={1000}
-              key={'key' in child ? child.key : index}
-              classNames={{
-                appear: cx(theme['appear']),
-                appearActive: cx(theme['appear-active']),
-                enter: cx(theme['enter']),
-                enterActive: cx(theme['enter-active']),
-                enterDone: cx(theme['enter-done']),
-                exit: cx(theme['exit']),
-                exitActive: cx(theme['exit-active']),
-                exitDone: cx(theme['exit-done']),
-              }}
-            >
-              {child}
-            </CSSTransition>
-          );
-        })}
-      </TransitionGroup>
-    </ul>
-  );
-};
+    return (
+      <ul className={classNames} style={style} data-teamleader-ui="toast-container" ref={ref}>
+        <TransitionGroup component="li">
+          {React.Children.map<ReactElement, AllowedChildrenTypes>(children, (child, index) => {
+            return (
+              <CSSTransition
+                timeout={1000}
+                key={'key' in child ? child.key : index}
+                classNames={{
+                  appear: cx(theme['appear']),
+                  appearActive: cx(theme['appear-active']),
+                  enter: cx(theme['enter']),
+                  enterActive: cx(theme['enter-active']),
+                  enterDone: cx(theme['enter-done']),
+                  exit: cx(theme['exit']),
+                  exitActive: cx(theme['exit-active']),
+                  exitDone: cx(theme['exit-done']),
+                }}
+              >
+                {child}
+              </CSSTransition>
+            );
+          })}
+        </TransitionGroup>
+      </ul>
+    );
+  },
+);
+
+ToastContainer.displayName = 'ToastContainer';
 
 export default ToastContainer;
diff --git a/src/components/toggle/Toggle.tsx b/src/components/toggle/Toggle.tsx
index ee0b07c73..544bc7df1 100644
--- a/src/components/toggle/Toggle.tsx
+++ b/src/components/toggle/Toggle.tsx
@@ -1,6 +1,6 @@
 import { IconInfoBadgedSmallFilled } from '@teamleader/ui-icons';
 import cx from 'classnames';
-import React, { ChangeEvent, ReactNode, useRef } from 'react';
+import React, { ChangeEvent, ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import { SIZES } from '../../constants';
 import Box, { omitBoxProps, pickBoxProps } from '../box';
@@ -29,82 +29,87 @@ export interface ToggleProps
   fullWidth?: boolean;
 }
 
-const Toggle: GenericComponent<ToggleProps> = ({
-  checked = false,
-  children,
-  disabled = false,
-  maxLines,
-  className,
-  label,
-  onChange,
-  size = 'medium',
-  tooltip,
-  tooltipPosition,
-  labelPosition = 'right',
-  fullWidth = false,
-  ...others
-}) => {
-  const ref = useRef<HTMLInputElement>(null);
-  const boxProps = pickBoxProps(others);
-  const inputProps = omitBoxProps(others);
-
-  const handleToggle = (event: ChangeEvent<HTMLInputElement>) => {
-    if (!disabled && onChange) {
-      onChange(event);
-    }
-  };
-  const classNames = cx(
-    theme['toggle'],
-    theme[`is-${size}`],
+const Toggle: GenericComponent<ToggleProps> = forwardRef<HTMLElement, ToggleProps>(
+  (
     {
-      [theme['is-checked']]: checked,
-      [theme['is-disabled']]: disabled,
-      [theme['label-on-left']]: labelPosition === 'left',
-      [theme['is-full-width']]: fullWidth,
+      checked = false,
+      children,
+      disabled = false,
+      maxLines,
+      className,
+      label,
+      onChange,
+      size = 'medium',
+      tooltip,
+      tooltipPosition,
+      labelPosition = 'right',
+      fullWidth = false,
+      ...others
     },
-    className,
-  );
+    ref,
+  ) => {
+    const boxProps = pickBoxProps(others);
+    const inputProps = omitBoxProps(others);
+
+    const handleToggle = (event: ChangeEvent<HTMLInputElement>) => {
+      if (!disabled && onChange) {
+        onChange(event);
+      }
+    };
+    const classNames = cx(
+      theme['toggle'],
+      theme[`is-${size}`],
+      {
+        [theme['is-checked']]: checked,
+        [theme['is-disabled']]: disabled,
+        [theme['label-on-left']]: labelPosition === 'left',
+        [theme['is-full-width']]: fullWidth,
+      },
+      className,
+    );
 
-  const TextElement = size === 'small' ? TextSmall : size === 'medium' ? TextBodyCompact : TextDisplay;
+    const TextElement = size === 'small' ? TextSmall : size === 'medium' ? TextBodyCompact : TextDisplay;
 
-  return (
-    <Box element="label" data-teamleader-ui="toggle" className={classNames} {...boxProps}>
-      <input
-        className={theme['input']}
-        type="checkbox"
-        checked={checked}
-        disabled={disabled}
-        onChange={handleToggle}
-        ref={ref}
-        {...inputProps}
-      />
-      <span className={theme['track']}>
-        <span className={theme['thumb']} />
-      </span>
-      {(label || children) && (
-        <span className={theme['label']}>
-          {label && (
-            <TextElement element="span" color={disabled ? 'neutral' : 'teal'} maxLines={maxLines}>
-              {label}
-            </TextElement>
-          )}
-          {children}
-          {tooltip && (
-            <TooltippedIcon
-              tooltip={<TextSmall>{tooltip}</TextSmall>}
-              tooltipSize="small"
-              tooltipPosition={tooltipPosition}
-              color="teal"
-              tint="darkest"
-              marginLeft={1}
-            >
-              <IconInfoBadgedSmallFilled />
-            </TooltippedIcon>
-          )}
+    return (
+      <Box element="label" data-teamleader-ui="toggle" className={classNames} {...boxProps} ref={ref}>
+        <input
+          className={theme['input']}
+          type="checkbox"
+          checked={checked}
+          disabled={disabled}
+          onChange={handleToggle}
+          {...inputProps}
+        />
+        <span className={theme['track']}>
+          <span className={theme['thumb']} />
         </span>
-      )}
-    </Box>
-  );
-};
+        {(label || children) && (
+          <span className={theme['label']}>
+            {label && (
+              <TextElement element="span" color={disabled ? 'neutral' : 'teal'} maxLines={maxLines}>
+                {label}
+              </TextElement>
+            )}
+            {children}
+            {tooltip && (
+              <TooltippedIcon
+                tooltip={<TextSmall>{tooltip}</TextSmall>}
+                tooltipSize="small"
+                tooltipPosition={tooltipPosition}
+                color="teal"
+                tint="darkest"
+                marginLeft={1}
+              >
+                <IconInfoBadgedSmallFilled />
+              </TooltippedIcon>
+            )}
+          </span>
+        )}
+      </Box>
+    );
+  },
+);
+
+Toggle.displayName = 'Toggle';
 
 export default Toggle;
diff --git a/src/components/typography/Marker.tsx b/src/components/typography/Marker.tsx
index 2d053342a..059657077 100644
--- a/src/components/typography/Marker.tsx
+++ b/src/components/typography/Marker.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import Box from '../box';
 import { BoxProps } from '../box/Box';
@@ -10,21 +10,26 @@ export interface MarkerProps extends BoxProps {
   className?: string;
 }
 
-const Marker: GenericComponent<MarkerProps> = ({ children, className, ...others }) => {
-  const classNames = cx(theme['marker'], className);
+const Marker: GenericComponent<MarkerProps> = forwardRef<HTMLElement, MarkerProps>(
+  ({ children, className, ...others }, ref) => {
+    const classNames = cx(theme['marker'], className);
 
-  return (
-    <Box
-      data-teamleader-ui="marker"
-      {...others}
-      className={classNames}
-      element="mark"
-      paddingHorizontal={1}
-      marginHorizontal={-1}
-    >
-      {children}
-    </Box>
-  );
-};
+    return (
+      <Box
+        data-teamleader-ui="marker"
+        {...others}
+        className={classNames}
+        element="mark"
+        paddingHorizontal={1}
+        marginHorizontal={-1}
+        ref={ref}
+      >
+        {children}
+      </Box>
+    );
+  },
+);
+
+Marker.displayName = 'Marker';
 
 export default Marker;
diff --git a/src/components/typography/Monospaced.tsx b/src/components/typography/Monospaced.tsx
index 9777eff6a..ef38bade7 100644
--- a/src/components/typography/Monospaced.tsx
+++ b/src/components/typography/Monospaced.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { ElementType, ReactNode } from 'react';
+import React, { ElementType, ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import uiTypography from '@teamleader/ui-typography';
 
@@ -8,16 +8,20 @@ export interface MonospacedProps {
   className?: string;
   element?: ElementType;
 }
-const Monospaced: GenericComponent<MonospacedProps> = ({ children, className, element = 'span' }) => {
-  const classNames = cx(uiTypography['monospaced'], className);
+const Monospaced: GenericComponent<MonospacedProps> = forwardRef<HTMLElement, MonospacedProps>(
+  ({ children, className, element = 'span' }, ref) => {
+    const classNames = cx(uiTypography['monospaced'], className);
 
-  const Element = element;
+    const Element = element;
 
-  return (
-    <Element data-teamleader-ui="monospaced" className={classNames}>
-      {children}
-    </Element>
-  );
-};
+    return (
+      <Element data-teamleader-ui="monospaced" className={classNames} ref={ref}>
+        {children}
+      </Element>
+    );
+  },
+);
+
+Monospaced.displayName = 'Monospaced';
 
 export default Monospaced;
diff --git a/src/components/validationText/ErrorText.tsx b/src/components/validationText/ErrorText.tsx
index 980061f2d..da4d7bfcd 100644
--- a/src/components/validationText/ErrorText.tsx
+++ b/src/components/validationText/ErrorText.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import { BoxProps } from '../box/Box';
 import { TextSmall } from '../typography';
@@ -8,14 +8,21 @@ export interface ErrorTextProps extends BoxProps {
   inverse?: boolean;
 }
 
-const ErrorText: GenericComponent<ErrorTextProps> = ({
-  children = 'This is the error text',
-  inverse = false,
-  ...others
-}) => (
-  <TextSmall {...others} color="ruby" data-teamleader-ui="error-text" marginTop={1} tint={inverse ? 'light' : 'dark'}>
-    {children}
-  </TextSmall>
+const ErrorText: GenericComponent<ErrorTextProps> = forwardRef<HTMLElement, ErrorTextProps>(
+  ({ children = 'This is the error text', inverse = false, ...others }, ref) => (
+    <TextSmall
+      {...others}
+      color="ruby"
+      data-teamleader-ui="error-text"
+      marginTop={1}
+      tint={inverse ? 'light' : 'dark'}
+      ref={ref}
+    >
+      {children}
+    </TextSmall>
+  ),
 );
 
+ErrorText.displayName = 'ErrorText';
+
 export default ErrorText;
diff --git a/src/components/validationText/HelpText.tsx b/src/components/validationText/HelpText.tsx
index 289b81d19..ea2f29578 100644
--- a/src/components/validationText/HelpText.tsx
+++ b/src/components/validationText/HelpText.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 
 import { GenericComponent } from '../../@types/types';
 import { BoxProps } from '../box/Box';
@@ -9,20 +9,21 @@ export interface HelpTextProps extends BoxProps {
   inverse?: boolean;
 }
 
-const HelpText: GenericComponent<HelpTextProps> = ({
-  children = 'This is the help text',
-  inverse = false,
-  ...others
-}) => (
-  <TextSmall
-    {...others}
-    color={inverse ? 'teal' : 'neutral'}
-    data-teamleader-ui="help-text"
-    marginTop={1}
-    tint={inverse ? 'light' : 'darkest'}
-  >
-    {children}
-  </TextSmall>
+const HelpText: GenericComponent<HelpTextProps> = forwardRef<HTMLElement, HelpTextProps>(
+  ({ children = 'This is the help text', inverse = false, ...others }, ref) => (
+    <TextSmall
+      {...others}
+      color={inverse ? 'teal' : 'neutral'}
+      data-teamleader-ui="help-text"
+      marginTop={1}
+      tint={inverse ? 'light' : 'darkest'}
+      ref={ref}
+    >
+      {children}
+    </TextSmall>
+  ),
 );
 
+HelpText.displayName = 'HelpText';
+
 export default HelpText;
diff --git a/src/components/validationText/SuccessText.tsx b/src/components/validationText/SuccessText.tsx
index 5758a94b5..044eaa6f4 100644
--- a/src/components/validationText/SuccessText.tsx
+++ b/src/components/validationText/SuccessText.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import { BoxProps } from '../box/Box';
 import { TextSmall } from '../typography';
@@ -8,14 +8,21 @@ export interface SuccessTextProps extends BoxProps {
   inverse?: boolean;
 }
 
-const SuccessText: GenericComponent<SuccessTextProps> = ({
-  children = 'This is the success text',
-  inverse = false,
-  ...others
-}) => (
-  <TextSmall {...others} color="mint" data-teamleader-ui="success-text" marginTop={1} tint={inverse ? 'light' : 'dark'}>
-    {children}
-  </TextSmall>
+const SuccessText: GenericComponent<SuccessTextProps> = forwardRef<HTMLElement, SuccessTextProps>(
+  ({ children = 'This is the success text', inverse = false, ...others }, ref) => (
+    <TextSmall
+      {...others}
+      color="mint"
+      data-teamleader-ui="success-text"
+      marginTop={1}
+      tint={inverse ? 'light' : 'dark'}
+      ref={ref}
+    >
+      {children}
+    </TextSmall>
+  ),
 );
 
+SuccessText.displayName = 'SuccessText';
+
 export default SuccessText;
diff --git a/src/components/validationText/ValidationText.tsx b/src/components/validationText/ValidationText.tsx
index 6918d530b..9d6f07083 100644
--- a/src/components/validationText/ValidationText.tsx
+++ b/src/components/validationText/ValidationText.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 
 import { GenericComponent } from '../../@types/types';
 import { BoxProps } from '../box/Box';
@@ -15,47 +15,44 @@ export interface ValidationTextProps extends Omit<BoxProps, 'children'> {
   warning?: ReactNode;
 }
 
-const ValidationText: GenericComponent<ValidationTextProps> = ({
-  error,
-  inverse,
-  help,
-  success,
-  warning,
-  ...others
-}) => {
-  if (error && typeof error !== 'boolean') {
-    return (
-      <ErrorText inverse={inverse} {...others}>
-        {error}
-      </ErrorText>
-    );
-  }
-
-  if (warning && typeof warning !== 'boolean') {
-    return (
-      <WarningText inverse={inverse} {...others}>
-        {warning}
-      </WarningText>
-    );
-  }
-
-  if (success && typeof success !== 'boolean') {
-    return (
-      <SuccessText inverse={inverse} {...others}>
-        {success}
-      </SuccessText>
-    );
-  }
-
-  if (help) {
-    return (
-      <HelpText inverse={inverse} {...others}>
-        {help}
-      </HelpText>
-    );
-  }
-
-  return null;
-};
+const ValidationText: GenericComponent<ValidationTextProps> = forwardRef<HTMLElement, ValidationTextProps>(
+  ({ error, inverse, help, success, warning, ...others }, ref) => {
+    if (error && typeof error !== 'boolean') {
+      return (
+        <ErrorText inverse={inverse} {...others} ref={ref}>
+          {error}
+        </ErrorText>
+      );
+    }
+
+    if (warning && typeof warning !== 'boolean') {
+      return (
+        <WarningText inverse={inverse} {...others} ref={ref}>
+          {warning}
+        </WarningText>
+      );
+    }
+
+    if (success && typeof success !== 'boolean') {
+      return (
+        <SuccessText inverse={inverse} {...others} ref={ref}>
+          {success}
+        </SuccessText>
+      );
+    }
+
+    if (help) {
+      return (
+        <HelpText inverse={inverse} {...others} ref={ref}>
+          {help}
+        </HelpText>
+      );
+    }
+
+    return null;
+  },
+);
+
+ValidationText.displayName = 'ValidationText';
 
 export default ValidationText;
diff --git a/src/components/validationText/WarningText.tsx b/src/components/validationText/WarningText.tsx
index 7402bccd5..5086b7c37 100644
--- a/src/components/validationText/WarningText.tsx
+++ b/src/components/validationText/WarningText.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import { BoxProps } from '../box/Box';
 import { TextSmall } from '../typography';
@@ -8,14 +8,21 @@ export interface WarningTextProps extends BoxProps {
   inverse?: boolean;
 }
 
-const WarningText: GenericComponent<WarningTextProps> = ({
-  children = 'This is the warning text',
-  inverse = false,
-  ...others
-}) => (
-  <TextSmall {...others} color="gold" data-teamleader-ui="warning-text" marginTop={1} tint={inverse ? 'light' : 'dark'}>
-    {children}
-  </TextSmall>
+const WarningText: GenericComponent<WarningTextProps> = forwardRef<HTMLElement, WarningTextProps>(
+  ({ children = 'This is the warning text', inverse = false, ...others }, ref) => (
+    <TextSmall
+      {...others}
+      color="gold"
+      data-teamleader-ui="warning-text"
+      marginTop={1}
+      tint={inverse ? 'light' : 'dark'}
+      ref={ref}
+    >
+      {children}
+    </TextSmall>
+  ),
 );
 
+WarningText.displayName = 'WarningText';
+
 export default WarningText;
diff --git a/src/components/wysiwygEditor/WysiwygEditor.tsx b/src/components/wysiwygEditor/WysiwygEditor.tsx
index 801ed4ac4..32b3c2de7 100644
--- a/src/components/wysiwygEditor/WysiwygEditor.tsx
+++ b/src/components/wysiwygEditor/WysiwygEditor.tsx
@@ -6,7 +6,7 @@ import {
   IconTextItalicMediumOutline,
 } from '@teamleader/ui-icons';
 import cx from 'classnames';
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';
 import { Editor, RawDraftContentState } from 'react-draft-wysiwyg';
 
 import Box, { pickBoxProps } from '../box';
@@ -87,132 +87,139 @@ export interface WysiwygEditorProps extends Omit<BoxProps, 'className'> {
   onKeyDown?: React.KeyboardEventHandler;
 }
 
-const WysiwygEditor: GenericComponent<WysiwygEditorProps> = ({
-  className,
-  error,
-  onInputFocus,
-  onFocus,
-  onInputBlur,
-  onBlur,
-  success,
-  warning,
-  helpText,
-  width,
-  locale = 'en',
-  inputClassName,
-  autoFocus,
-  onKeyDown,
-  ...others
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const [isPlaceholderShown, setIsPlaceholderShown] = useState(true);
-  const editorRef = useRef<EditorType>(null);
-
-  useEffect(() => {
-    if (autoFocus) {
-      editorRef?.current?.focusEditor();
-    }
-  }, [autoFocus]);
-
-  useEffect(() => {
-    if (!onKeyDown || !editorRef.current?.wrapper) {
-      return;
-    }
-
-    const handleKeyDown = (event: React.KeyboardEvent) => onKeyDown(event);
-
-    editorRef.current.wrapper.addEventListener('keydown', handleKeyDown);
-
-    return () => {
+const WysiwygEditor: GenericComponent<WysiwygEditorProps> = forwardRef<HTMLElement, WysiwygEditorProps>(
+  (
+    {
+      className,
+      error,
+      onInputFocus,
+      onFocus,
+      onInputBlur,
+      onBlur,
+      success,
+      warning,
+      helpText,
+      width,
+      locale = 'en',
+      inputClassName,
+      autoFocus,
+      onKeyDown,
+      ...others
+    },
+    ref,
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [isPlaceholderShown, setIsPlaceholderShown] = useState(true);
+    const editorRef = useRef<EditorType>(null);
+
+    useEffect(() => {
+      if (autoFocus) {
+        editorRef?.current?.focusEditor();
+      }
+    }, [autoFocus]);
+
+    useEffect(() => {
       if (!onKeyDown || !editorRef.current?.wrapper) {
         return;
       }
+
+      const handleKeyDown = (event: React.KeyboardEvent) => onKeyDown(event);
+
+      editorRef.current.wrapper.addEventListener('keydown', handleKeyDown);
+
+      return () => {
+        if (!onKeyDown || !editorRef.current?.wrapper) {
+          return;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        editorRef.current.wrapper.removeEventListener('keydown', handleKeyDown);
+      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      editorRef.current.wrapper.removeEventListener('keydown', handleKeyDown);
+    }, []);
+
+    const handleBlur = (event: React.FocusEvent<any, any>) => {
+      const editorInput = document.querySelector("[aria-label='rdw-editor']");
+      // Only blur when editorInput is blurred and the newly focussed target is not part of the wysiwyg
+      if (event.target === editorInput && !event.relatedTarget?.dataset?.wysiwyg) {
+        setIsFocused(false);
+        onBlur && onBlur(event);
+      }
+
+      if (onInputBlur) {
+        onInputBlur(event);
+      }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleBlur = (event: React.FocusEvent<any, any>) => {
-    const editorInput = document.querySelector("[aria-label='rdw-editor']");
-    // Only blur when editorInput is blurred and the newly focussed target is not part of the wysiwyg
-    if (event.target === editorInput && !event.relatedTarget?.dataset?.wysiwyg) {
-      setIsFocused(false);
-      onBlur && onBlur(event);
-    }
-
-    if (onInputBlur) {
-      onInputBlur(event);
-    }
-  };
-
-  const handleFocus = (event: React.FocusEvent<any, any>) => {
-    const editorInput = document.querySelector("[aria-label='rdw-editor']");
-
-    // Only focus when focussed target is part of the wysiwyg and the editor isn't focussed yet
-    if ((event.target.dataset?.wysiwyg || event.target === editorInput) && !isFocused) {
-      setIsFocused(true);
-      onFocus && onFocus(event);
-    }
-
-    if (onInputFocus) {
-      onInputFocus(event);
-    }
-  };
-
-  const handleContentStateChange = ({ blocks: [{ type }] }: RawDraftContentState) => {
-    if (type === 'unstyled') {
-      setIsPlaceholderShown(true);
-      return;
-    }
-    setIsPlaceholderShown(false);
-  };
-
-  const wrapperClassNames = cx(
-    theme['wrapper'],
-    {
-      [theme['has-focus']]: isFocused,
-      [theme['has-error']]: error,
-      [theme['has-success']]: success,
-      [theme['has-warning']]: warning,
-      [theme['has-placeholder']]: isPlaceholderShown,
-    },
-    className,
-  );
-
-  const inputClassNames = cx(theme['input'], inputClassName);
-
-  const boxProps = pickBoxProps(others);
-
-  return (
-    <Box data-teamleader-ui="wysiwyg-editor" style={{ width, flex: width && '0 0 auto' }} {...boxProps}>
-      <Editor
-        toolbar={toolbar}
-        wrapperClassName={wrapperClassNames}
-        editorClassName={inputClassNames}
-        toolbarClassName={theme['toolbar']}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        onContentStateChange={handleContentStateChange}
-        customStyleMap={customStyleMap}
-        customDecorators={[linkDecorator]}
-        localization={
-          availableLocales.includes(locale)
-            ? {
-                locale,
-                translations: translations[locale],
-              }
-            : {
-                locale: 'en',
-                translations: translations['en'],
-              }
-        }
-        ref={editorRef}
-        {...others}
-      />
-      <ValidationText error={error} help={helpText} success={success} warning={warning} />
-    </Box>
-  );
-};
+
+    const handleFocus = (event: React.FocusEvent<any, any>) => {
+      const editorInput = document.querySelector("[aria-label='rdw-editor']");
+
+      // Only focus when focussed target is part of the wysiwyg and the editor isn't focussed yet
+      if ((event.target.dataset?.wysiwyg || event.target === editorInput) && !isFocused) {
+        setIsFocused(true);
+        onFocus && onFocus(event);
+      }
+
+      if (onInputFocus) {
+        onInputFocus(event);
+      }
+    };
+
+    const handleContentStateChange = ({ blocks: [{ type }] }: RawDraftContentState) => {
+      if (type === 'unstyled') {
+        setIsPlaceholderShown(true);
+        return;
+      }
+      setIsPlaceholderShown(false);
+    };
+
+    const wrapperClassNames = cx(
+      theme['wrapper'],
+      {
+        [theme['has-focus']]: isFocused,
+        [theme['has-error']]: error,
+        [theme['has-success']]: success,
+        [theme['has-warning']]: warning,
+        [theme['has-placeholder']]: isPlaceholderShown,
+      },
+      className,
+    );
+
+    const inputClassNames = cx(theme['input'], inputClassName);
+
+    const boxProps = pickBoxProps(others);
+
+    return (
+      <Box data-teamleader-ui="wysiwyg-editor" style={{ width, flex: width && '0 0 auto' }} {...boxProps} ref={ref}>
+        <Editor
+          toolbar={toolbar}
+          wrapperClassName={wrapperClassNames}
+          editorClassName={inputClassNames}
+          toolbarClassName={theme['toolbar']}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onContentStateChange={handleContentStateChange}
+          customStyleMap={customStyleMap}
+          customDecorators={[linkDecorator]}
+          localization={
+            availableLocales.includes(locale)
+              ? {
+                  locale,
+                  translations: translations[locale],
+                }
+              : {
+                  locale: 'en',
+                  translations: translations['en'],
+                }
+          }
+          ref={editorRef}
+          {...others}
+        />
+        <ValidationText error={error} help={helpText} success={success} warning={warning} />
+      </Box>
+    );
+  },
+);
+
+WysiwygEditor.displayName = 'WysiwygEditor';
 
 export default WysiwygEditor;