diff --git a/src/Button/index.scss b/src/Button/index.scss
index ea4224aa0..6ed57487e 100644
--- a/src/Button/index.scss
+++ b/src/Button/index.scss
@@ -97,3 +97,13 @@
 .nds-plain-button {
   @extend %btn-kind-plain;
 }
+
+.nds-button--spread {
+  justify-content: stretch !important;
+
+  &.nds-button--xs .nds-button-content,
+  &.nds-button--s .nds-button-content,
+  &.nds-button--m .nds-button-content {
+    width: 100% !important;
+  }
+}
diff --git a/src/Button/index.stories.tsx b/src/Button/index.stories.tsx
index 6bd4f98d2..72c2a7fc1 100644
--- a/src/Button/index.stories.tsx
+++ b/src/Button/index.stories.tsx
@@ -100,11 +100,33 @@ export const ButtonSizes = () => (
   </>
 );
 
+export const SpreadLayoutWithIcon = () => (
+  <div
+    style={{
+      width: "240px",
+      padding: "22px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px",
+    }}
+  >
+    <Button
+      label="Get started"
+      type="submit"
+      endIcon="arrow-right"
+      size="s"
+      isSpread={true}
+    />
+  </div>
+);
+
+
 export default {
   title: "Components/Button",
   component: Button,
   argTypes: {
     startIcon: { options: ["", ...(VALID_ICON_NAMES as IconName)] },
     endIcon: { options: ["", ...(VALID_ICON_NAMES as IconName)] },
+    isSpread: { control: "boolean" },
   },
 };
diff --git a/src/Button/index.tsx b/src/Button/index.tsx
index 27db07710..60a8cae31 100644
--- a/src/Button/index.tsx
+++ b/src/Button/index.tsx
@@ -31,6 +31,8 @@ export interface ButtonProps {
   startIcon?: IconName | null;
   /** Name of Narmi icon to place at the end of the label */
   endIcon?: IconName | null;
+  /** Spreads icon and text to opposite ends of the button */
+  isSpread?: boolean;
   /** Optional value for `data-testid` attribute */
   testId?: string;
   /** Optional value for setting the aria-label. If unset label will be used. */
@@ -62,6 +64,7 @@ const Button = ({
   size = "m",
   startIcon = null,
   endIcon = null,
+  isSpread = false,
   testId,
   children,
   label,
@@ -107,6 +110,7 @@ const Button = ({
           resetButton: as === "button",
           "nds-button--disabled": disabled,
           "nds-button--loading": isLoading,
+          "nds-button--spread": isSpread,
         },
       ])}
       disabled={(isButtonElement && disabled) || isLoading ? true : undefined}
@@ -122,13 +126,17 @@ const Button = ({
           </div>
         )}
         <div style={{ visibility: isLoading ? "hidden" : "visible" }}>
-          <Row gapSize={gapSizeMap[size]} alignItems="center">
+          <Row
+            gapSize={isSpread ? "xs" : gapSizeMap[size]}
+            alignItems="center"
+            justifyContent={isSpread ? "space-between" : "center"}
+          >
             {startIcon && (
               <Row.Item shrink>
                 <Icon name={startIcon} />
               </Row.Item>
             )}
-            <Row.Item>
+            <Row.Item shrink={isSpread}>
               <span className="nds-button-label">{buttonLabel}</span>
             </Row.Item>
             {endIcon && (