diff --git a/@navikt/core/css/form/file-upload.css b/@navikt/core/css/form/file-upload.css
index 629ce59262..3d33484887 100644
--- a/@navikt/core/css/form/file-upload.css
+++ b/@navikt/core/css/form/file-upload.css
@@ -3,14 +3,14 @@
   text-align: center
 }
 
-.navds-fileuploadbutton {
+.navds-fileupload__button {
   position: relative;
   cursor: pointer;
   background-color: var(--ac-file-upload-button-bg, var(--a-bg-default));
   transition: 0.2s ease all;
 }
 
-.navds-fileupload:hover .navds-fileuploadbutton {
+.navds-fileupload:hover .navds-fileupload__button {
   background-color: var(--ac-file-upload-action-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
@@ -35,22 +35,22 @@
 }
 
 .navds-fileupload--dragover,
-.navds-fileuploadbutton--dragover {
+.navds-fileupload--dragover .navds-fileupload__button {
   background-color: var(--ac-file-upload-dragover-bg, var(--a-surface-action-subtle-hover));
 }
 
-.navds-fileupload--error:not(:hover):not(.navds-fileupload--dragover) .navds-fileuploadbutton {
+.navds-fileupload--error:not(:hover):not(.navds-fileupload--dragover) .navds-fileupload__button {
   box-shadow: inset 0 0 0 2px var(--ac-file-upload-error-border, var(--a-surface-danger))
 }
 
-.navds-fileupload:focus:not(.navds-fileupload--dragover) .navds-fileuploadbutton,
-.navds-fileupload:focus-within:not(.navds-fileupload--dragover) .navds-fileuploadbutton {
+.navds-fileupload:focus:not(.navds-fileupload--dragover) .navds-fileupload__button,
+.navds-fileupload:focus-within:not(.navds-fileupload--dragover) .navds-fileupload__button {
   box-shadow: inset 0 0 0 2px
     var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
   var(--a-shadow-focus);
 }
 
-.navds-fileuploadinput {
+.navds-fileupload__input {
   position: absolute;
   top: 0;
   right: 0;
diff --git a/@navikt/core/react/src/form/file-upload/BoxVariant.tsx b/@navikt/core/react/src/form/file-upload/BoxVariant.tsx
new file mode 100644
index 0000000000..6191c64bc7
--- /dev/null
+++ b/@navikt/core/react/src/form/file-upload/BoxVariant.tsx
@@ -0,0 +1,85 @@
+import React, { ChangeEvent, useRef, useState } from "react";
+import { useClientLayoutEffect } from "../../util";
+import { BodyShort } from "../../typography";
+import Wrapper from "./Wrapper";
+import UploadButton from "./UploadButton";
+
+interface Props {
+  label: string;
+  className: string | undefined;
+  divRef: React.Ref<HTMLDivElement>;
+  error: string | undefined;
+  inputId: string;
+  multiple: boolean;
+  accept: string | undefined;
+  handleUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+  onDragEnter: () => void;
+  onDragEnd: () => void;
+  isDraggingOver: boolean;
+}
+
+const BoxVariant = ({
+  label,
+  className,
+  onDragEnter,
+  onDragEnd,
+  divRef,
+  error,
+  isDraggingOver,
+  inputId,
+  multiple,
+  accept,
+  handleUpload,
+}: Props) => {
+  const labelRef = useRef<HTMLLabelElement | null>(null)
+  const [widthOverride, setWidthOverride] = useState<number>()
+  const [heightOverride, setHeightOverride] = useState<number>()
+
+  useClientLayoutEffect(() => {
+    if (isDraggingOver) {
+      const requestID = window.requestAnimationFrame(() => {
+        const boundingClientRect = labelRef?.current?.getBoundingClientRect()
+        setWidthOverride(boundingClientRect?.width)
+        setHeightOverride(boundingClientRect?.height)
+      });
+      return () => {
+        setWidthOverride(undefined);
+        setHeightOverride(undefined);
+        cancelAnimationFrame(requestID);
+      };
+    } else {
+      setWidthOverride(undefined);
+      setHeightOverride(undefined);
+    }
+  }, [isDraggingOver]);
+
+  return (<Wrapper
+    divRef={divRef}
+    className={className}
+    labelClassName="navds-fileupload--box"
+    onDragEnter={onDragEnter}
+    onDragEnd={onDragEnd}
+    labelRef={labelRef}
+    style={{
+      width: widthOverride,
+      height: heightOverride
+    }}
+    error={error}
+    isDraggingOver={isDraggingOver}
+    inputId={inputId}
+    multiple={multiple}
+    accept={accept}
+    handleUpload={handleUpload}
+  >
+    {widthOverride
+      ? <BodyShort as="span">Slipp</BodyShort>
+      : (<>
+        <BodyShort as="span">Dra og slipp</BodyShort>
+        <BodyShort as="span">eller</BodyShort>
+        <UploadButton label={label} />
+      </>)
+    }
+  </Wrapper>)
+}
+
+export default BoxVariant
diff --git a/@navikt/core/react/src/form/file-upload/ButtonVariant.tsx b/@navikt/core/react/src/form/file-upload/ButtonVariant.tsx
new file mode 100644
index 0000000000..a4d23d2bdc
--- /dev/null
+++ b/@navikt/core/react/src/form/file-upload/ButtonVariant.tsx
@@ -0,0 +1,48 @@
+import React, { ChangeEvent } from "react";
+import Wrapper from "./Wrapper";
+import UploadButton from "./UploadButton";
+
+interface Props {
+  label: string;
+  className: string | undefined;
+  divRef: React.Ref<HTMLDivElement>;
+  error: string | undefined;
+  inputId: string;
+  multiple: boolean;
+  accept: string | undefined;
+  handleUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+  onDragEnter: () => void;
+  onDragEnd: () => void;
+  isDraggingOver: boolean;
+}
+
+const ButtonVariant = ({
+  label,
+  className,
+  onDragEnter,
+  onDragEnd,
+  divRef,
+  error,
+  isDraggingOver,
+  inputId,
+  multiple,
+  accept,
+  handleUpload
+}: Props) => (
+  <Wrapper
+    divRef={divRef}
+    className={className}
+    error={error}
+    inputId={inputId}
+    multiple={multiple}
+    accept={accept}
+    handleUpload={handleUpload}
+    onDragEnter={onDragEnter}
+    onDragEnd={onDragEnd}
+    isDraggingOver={isDraggingOver}
+  >
+    <UploadButton label={label} />
+  </Wrapper>
+)
+
+export default ButtonVariant
diff --git a/@navikt/core/react/src/form/file-upload/FileUpload.tsx b/@navikt/core/react/src/form/file-upload/FileUpload.tsx
index 90b658ae67..9fdfffb7d2 100644
--- a/@navikt/core/react/src/form/file-upload/FileUpload.tsx
+++ b/@navikt/core/react/src/form/file-upload/FileUpload.tsx
@@ -1,9 +1,7 @@
-import { UploadIcon } from "@navikt/aksel-icons";
-import cl from "clsx";
-import React, { forwardRef, ChangeEvent, useState, useRef } from "react";
-import { BodyShort, ErrorMessage } from "../../typography";
+import React, { forwardRef, ChangeEvent, useState } from "react";
 import { partitionFiles } from "./partition-files";
-import { useClientLayoutEffect } from "../../util";
+import ButtonVariant from "./ButtonVariant";
+import BoxVariant from "./BoxVariant";
 
 export interface OnUploadProps {
   allFiles: File[],
@@ -90,32 +88,7 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
     },
     ref
   ) => {
-    const isBoxVariant = variant === "box"
-    const errorId = `${inputId}-error`
-    const ariaDescribedby = error ? errorId : undefined
-
-    const labelRef = useRef<HTMLLabelElement | null>(null)
     const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false)
-    const [widthOverride, setWidthOverride] = useState<number>()
-    const [heightOverride, setHeightOverride] = useState<number>()
-
-    useClientLayoutEffect(() => {
-      if (isBoxVariant && isDraggingOver) {
-        const requestID = window.requestAnimationFrame(() => {
-          const boundingClientRect = labelRef?.current?.getBoundingClientRect()
-          setWidthOverride(boundingClientRect?.width)
-          setHeightOverride(boundingClientRect?.height)
-        });
-        return () => {
-          setWidthOverride(undefined);
-          setHeightOverride(undefined);
-          cancelAnimationFrame(requestID);
-        };
-      } else {
-        setWidthOverride(undefined);
-        setHeightOverride(undefined);
-      }
-    }, [isDraggingOver, variant]);
 
     const onDragEnter = () => setIsDraggingOver(true)
     const onDragEnd = () => setIsDraggingOver(false)
@@ -134,68 +107,35 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
       event.target.value = ""
     }
 
-    return (
-      <div
-        className={cl("navds-form-field", className)}
-        onDragOver={onDragEnter}
-        onDragLeave={onDragEnd}
+    if (variant === "button") {
+      return <ButtonVariant
+        label={label}
+        divRef={ref}
+        className={className}
+        error={error}
+        inputId={inputId}
+        multiple={multiple}
+        accept={accept}
+        handleUpload={handleUpload}
+        onDragEnter={onDragEnter}
         onDragEnd={onDragEnd}
-        onDrop={onDragEnd}
-        ref={ref}
-      >
-        <label
-          style={{
-            width: widthOverride,
-            height: heightOverride
-          }}
-          ref={labelRef}
-          className={
-            cl("navds-fileupload", {
-              'navds-fileupload--box': isBoxVariant,
-              "navds-fileupload--error": !!error,
-              "navds-fileupload--dragover": isDraggingOver
-            })
-          }
-        >
-          {widthOverride
-            ? <BodyShort as="span">Slipp</BodyShort>
-            : (<>
-              {isBoxVariant && (<>
-                <BodyShort as="span">Dra og slipp</BodyShort>
-                <BodyShort as="span">eller</BodyShort>
-              </>)}
-              <span
-                className={cl(
-                  "navds-button",
-                  "navds-button--secondary",
-                  "navds-fileuploadbutton",
-                  { "navds-fileuploadbutton--dragover": isDraggingOver }
-                )}
-              >
-                <UploadIcon fontSize="1.5rem" focusable={false} aria-hidden={true} className="navds-fileupload__icon" />
-                  {label}
-              </span>
-            </>)
-          }
-          <input
-            type="file"
-            className="navds-fileuploadinput"
-            id={inputId}
-            multiple={multiple}
-            aria-describedby={ariaDescribedby}
-            accept={accept}
-            onChange={handleUpload}
-          />
-        </label>
-        <div
-          className="navds-form-field__error"
-          id={errorId}
-          aria-relevant="additions removals"
-          aria-live="polite"
-        >
-          {error && <ErrorMessage>{error}</ErrorMessage>}
-        </div>
-      </div>)
+        isDraggingOver={isDraggingOver}
+      />
+    } else {
+      return <BoxVariant
+        label={label}
+        divRef={ref}
+        className={className}
+        error={error}
+        inputId={inputId}
+        multiple={multiple}
+        accept={accept}
+        handleUpload={handleUpload}
+        onDragEnter={onDragEnter}
+        onDragEnd={onDragEnd}
+        isDraggingOver={isDraggingOver}
+      />
+    }
   }
 );
 
diff --git a/@navikt/core/react/src/form/file-upload/UploadButton.tsx b/@navikt/core/react/src/form/file-upload/UploadButton.tsx
new file mode 100644
index 0000000000..f8656a7eef
--- /dev/null
+++ b/@navikt/core/react/src/form/file-upload/UploadButton.tsx
@@ -0,0 +1,15 @@
+import { UploadIcon } from "@navikt/aksel-icons";
+import React from "react";
+
+interface Props {
+  label: string
+}
+
+const UploadButton = ({ label }: Props) => (
+  <span className="navds-button navds-button--secondary navds-fileupload__button">
+    <UploadIcon fontSize="1.5rem" focusable={false} aria-hidden={true} className="navds-fileupload__icon" />
+    {label}
+  </span>
+)
+
+export default UploadButton
diff --git a/@navikt/core/react/src/form/file-upload/Wrapper.tsx b/@navikt/core/react/src/form/file-upload/Wrapper.tsx
new file mode 100644
index 0000000000..fb393f4f83
--- /dev/null
+++ b/@navikt/core/react/src/form/file-upload/Wrapper.tsx
@@ -0,0 +1,84 @@
+import cl from "clsx";
+import { ErrorMessage } from "../../typography";
+import React from "react";
+
+interface Props {
+  className?: string,
+  labelClassName?: string,
+  onDragEnter?: () => void;
+  onDragEnd?: () => void;
+  divRef: any;
+  labelRef?: any;
+  style?: any;
+  error: any;
+  isDraggingOver: any;
+  children: any;
+  inputId: any;
+  multiple: any;
+  accept: any;
+  handleUpload: any;
+}
+
+const Wrapper = ({
+  className,
+  labelClassName,
+  onDragEnter,
+  onDragEnd,
+  divRef,
+  labelRef,
+  style,
+  error,
+  isDraggingOver,
+  children,
+  inputId,
+  multiple,
+  accept,
+  handleUpload
+}: Props) => {
+  const errorId = `${inputId}-error`
+  const ariaDescribedby = error ? errorId : undefined
+
+  return <div
+    className={cl("navds-form-field", className)}
+    onDragOver={onDragEnter}
+    onDragLeave={onDragEnd}
+    onDragEnd={onDragEnd}
+    onDrop={onDragEnd}
+    ref={divRef}
+  >
+    <label
+      style={style}
+      ref={labelRef}
+      className={
+        cl(
+          "navds-fileupload",
+          labelClassName,
+          {
+            "navds-fileupload--error": !!error,
+            "navds-fileupload--dragover": isDraggingOver
+          }
+        )
+      }
+    >
+      {children}
+      <input
+        type="file"
+        className="navds-fileupload__input"
+        id={inputId}
+        multiple={multiple}
+        aria-describedby={ariaDescribedby}
+        accept={accept}
+        onChange={handleUpload}
+      />
+    </label>
+    <div
+      className="navds-form-field__error"
+      id={errorId}
+      aria-relevant="additions removals"
+      aria-live="polite"
+    >
+      {error && <ErrorMessage>{error}</ErrorMessage>}
+    </div>
+  </div>}
+
+export default Wrapper