diff --git a/docs/src/Callout.doc.js b/docs/src/Callout.doc.js
index b525c6fb09..fbff470a40 100644
--- a/docs/src/Callout.doc.js
+++ b/docs/src/Callout.doc.js
@@ -52,13 +52,14 @@ card(
         href: '',
       },
       {
-        name: 'primaryLink',
+        name: 'primaryAction',
         type:
           '{| accessibilityLabel?: string , href: string, label: string, onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
         required: false,
         defaultValue: null,
         description: [
-          'Link-role button to render inside the callout as the main call-to-action to the user. The label text has a fixed size.',
+          'Button to render inside the callout as the main call-to-action to the user. The label text has a fixed size.',
+          '- href: If href is supplied, the action will serve as a link, while if no href is supplied, the action will be a button',
           '- label: Text to render inside the button to convey the function and purpose of the button. The button text has a fixed size.',
           '- accessibilityLabel: Supply a short, descriptive label for screen-readers to replace button texts that do not provide sufficient context about the button component behavior. Texts like `Click Here,` `Follow,` or `Read More` can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the button text.',
           '- onClick: Callback fired when the button component is clicked (pressed and released) with a mouse or keyboard.',
@@ -67,13 +68,14 @@ card(
         href: '',
       },
       {
-        name: 'secondaryLink',
+        name: 'secondaryAction',
         type:
           '{| accessibilityLabel?: string , href: string, label: string, onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
         required: false,
         defaultValue: null,
         description: [
-          'Link-role button to render inside the callout as a secondary call-to-action to the user.',
+          'Button to render inside the callout as the secondary call-to-action to the user. The label text has a fixed size.',
+          '- href: If href is supplied, the action will serve as a link, while if no href is supplied, the action will be a button',
           '- label: Text to render inside the button to convey the function and purpose of the button. The button text has a fixed size.',
           '- accessibilityLabel: Supply a short, descriptive label for screen-readers to replace button texts that do not provide sufficient context about the button component behavior. Texts like `Click Here,` `Follow,` or `Read More` can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the button text.',
           '- onClick: Callback fired when the button component is clicked (pressed and released) with a mouse or keyboard.',
@@ -117,8 +119,8 @@ card(
   iconAccessibilityLabel="Info icon"
   title="Your business account was created!"
   message="Apply to the Verified Merchant Program!"
-  primaryLink={{href: "https://pinterest.com", label:"Get started"}}
-  secondaryLink={{href: "https://pinterest.com", label:"Learn more"}}
+  primaryAction={{href: "https://pinterest.com", label:"Get started"}}
+  secondaryAction={{href: "https://pinterest.com", label:"Learn more"}}
   dismissButton={{
     accessibilityLabel: 'Dismiss banner',
     onDismiss: ()=>{},
@@ -136,7 +138,7 @@ card(
   type="warning"
   iconAccessibilityLabel="Warning icon"
   message="This feature will be removed in two weeks."
-  primaryLink={{href: "https://pinterest.com", label:"Learn more"}}
+  primaryAction={{href: "https://pinterest.com", label:"Learn more"}}
   dismissButton={{
     accessibilityLabel: 'Dismiss banner',
     onDismiss: ()=>{},
@@ -159,4 +161,112 @@ card(
   />
 );
 
+card(
+  <Example
+    name="Example with button call-to-action"
+    description={`
+      \`primaryAction\` and \`secondaryAction\` can be used as buttons when no \`href\` is supplied.
+    `}
+    defaultCode={`
+function Example(props) {
+  const [showModal, setShowModal] = React.useState(false);
+
+  return (
+    <Box marginLeft={-1} marginRight={-1}>
+      <Callout
+        type="info"
+        iconAccessibilityLabel="Info icon"
+        title="Your board was created!"
+        message="You can edit your board at anytime!"
+        primaryAction={{
+          label:"Edit board", role: "button",
+          onClick: () => { setShowModal(!showModal) }
+        }}
+        dismissButton={{
+          accessibilityLabel: 'Dismiss banner',
+          onDismiss: ()=>{},
+        }}
+      />
+      {showModal && (
+        <Layer>
+          <Modal
+            accessibilityModalLabel="Edit Julia's board"
+            heading="Edit your board"
+            onDismiss={() => { setShowModal(!showModal) }}
+            footer={
+              <Box
+                justifyContent="between"
+                display="flex"
+                direction="row"
+                marginLeft={-1}
+                marginRight={-1}
+              >
+                <Box column={12} smColumn={6} paddingX={1}>
+                  <Button text="Delete Board" inline size="lg" />
+                </Box>
+                <Box column={12} smColumn={6} paddingX={1}>
+                  <Box
+                    display="flex"
+                    justifyContent="end"
+                  >
+                    <ButtonGroup>
+                      <Button text="Cancel" inline onClick={() => { setShowModal(!showModal) }} size="lg" />
+                      <Button color="red" inline text="Save" size="lg" />
+                    </ButtonGroup>
+                  </Box>
+                </Box>
+              </Box>
+            }
+            size="md"
+          >
+            <Box display="flex" direction="row" position="relative">
+              <Column span={12}>
+                <Box paddingY={2} paddingX={8} display="flex">
+                  <Column span={4}>
+                    <Label htmlFor="name">
+                      <Text align="left" weight="bold">
+                        Name
+                      </Text>
+                    </Label>
+                  </Column>
+                  <Column span={8}>
+                    <TextField id="name" onChange={() => undefined} />
+                  </Column>
+                </Box>
+                <Box paddingY={2} paddingX={8} display="flex">
+                  <Column span={4}>
+                    <Label htmlFor="desc">
+                      <Text align="left" weight="bold">
+                        Description
+                      </Text>
+                    </Label>
+                  </Column>
+                  <Column span={8}>
+                    <TextArea id="desc" onChange={() => undefined} />
+                  </Column>
+                </Box>
+                <Box paddingY={2} paddingX={8} display="flex">
+                  <Column span={4}>
+                    <Label htmlFor="notifications">
+                      <Text align="left" weight="bold">
+                        Email Notifications
+                      </Text>
+                    </Label>
+                  </Column>
+                  <Column span={8}>
+                    <Switch id="notifications" onChange={() => undefined} switched />
+                  </Column>
+                </Box>
+              </Column>
+            </Box>
+          </Modal>
+        </Layer>
+      )}
+    </Box>
+  );
+}
+`}
+  />
+);
+
 export default cards;
diff --git a/docs/src/Upsell.doc.js b/docs/src/Upsell.doc.js
index 0c34ff803c..347d342053 100644
--- a/docs/src/Upsell.doc.js
+++ b/docs/src/Upsell.doc.js
@@ -51,13 +51,14 @@ card(
         href: 'Image',
       },
       {
-        name: 'primaryLink',
+        name: 'primaryAction',
         type:
           '{| accessibilityLabel?: string , href: string, label: string, onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
         required: false,
         defaultValue: null,
         description: [
-          'Link-role button to render inside the Upsell as the main call-to-action to the user. The label text has a fixed size.',
+          'Button to render inside the callout as the main call-to-action to the user. The label text has a fixed size.',
+          '- href: If href is supplied, the action will serve as a link, while if no href is supplied, the action will be a button',
           '- label: Text to render inside the button to convey the function and purpose of the button. The button text has a fixed size.',
           '- accessibilityLabel: Supply a short, descriptive label for screen-readers to replace button texts that do not provide sufficient context about the button component behavior. Texts like `Click Here,` `Follow,` or `Read More` can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the button text.',
           '- onClick: Callback fired when the button component is clicked (pressed and released) with a mouse or keyboard.',
@@ -66,13 +67,14 @@ card(
         href: '',
       },
       {
-        name: 'secondaryLink',
+        name: 'secondaryAction',
         type:
           '{| accessibilityLabel?: string , href: string, label: string, onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
         required: false,
         defaultValue: null,
         description: [
-          'Link-role button to render inside the Upsell as a secondary call-to-action to the user.',
+          'Button to render inside the callout as the secondary call-to-action to the user. The label text has a fixed size.',
+          '- href: If href is supplied, the action will serve as a link, while if no href is supplied, the action will be a button',
           '- label: Text to render inside the button to convey the function and purpose of the button. The button text has a fixed size.',
           '- accessibilityLabel: Supply a short, descriptive label for screen-readers to replace button texts that do not provide sufficient context about the button component behavior. Texts like `Click Here,` `Follow,` or `Read More` can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the button text.',
           '- onClick: Callback fired when the button component is clicked (pressed and released) with a mouse or keyboard.',
@@ -94,24 +96,6 @@ card(
   />
 );
 
-card(
-  <Example
-    name="Call to Actions and Title"
-    defaultCode={`
-<Upsell
-  title="Join the Verified Merchant Program"
-  message="Apply to the Verified Merchant Program—it’s free"
-  primaryLink={{href: "https://pinterest.com", label:"Apply now"}}
-  secondaryLink={{href: "https://pinterest.com", label:"Learn more"}}
-  dismissButton={{
-    accessibilityLabel: 'Dismiss banner',
-    onDismiss: ()=>{},
-  }}
-/>
-`}
-  />
-);
-
 card(
   <Example
     name="Simple message"
@@ -134,7 +118,7 @@ card(
 <Upsell
   title="Give $30, get $60 in ads credit"
   message="Earn $60 of ads credit, and give $30 of ads credit to a friend"
-  primaryLink={{href: "https://pinterest.com", label:"Send invite"}}
+  primaryAction={{href: "https://pinterest.com", label:"Send invite"}}
   dismissButton={{
     accessibilityLabel: 'Dismiss banner',
     onDismiss: ()=>{},
@@ -154,7 +138,7 @@ card(
 <Upsell
   title="Stay healthy and safe"
   message="Check out our resources for adapting to these times."
-  primaryLink={{href: "https://pinterest.com", label:"Visit"}}
+  primaryAction={{href: "https://pinterest.com", label:"Visit"}}
   dismissButton={{
     accessibilityLabel: 'Dismiss banner',
     onDismiss: ()=>{},
@@ -176,4 +160,93 @@ card(
   />
 );
 
+card(
+  <Example
+    name="Link Call to Actions"
+    description={`
+      When \`href\` is supplied to \`primaryAction\` and \`secondaryAction\` the action button defaults to a link-role button.
+    `}
+    defaultCode={`
+<Upsell
+  title="Join the Verified Merchant Program"
+  message="Apply to the Verified Merchant Program—it’s free"
+  primaryAction={{href: "https://pinterest.com", label:"Apply now"}}
+  secondaryAction={{href: "https://pinterest.com", label:"Learn more"}}
+  dismissButton={{
+    accessibilityLabel: 'Dismiss banner',
+    onDismiss: ()=>{},
+  }}
+/>
+`}
+  />
+);
+
+card(
+  <Example
+    name="Button Call to Actions"
+    description={`
+      \`primaryAction\` and \`secondaryAction\` can be used as buttons when no \`href\` is supplied.
+    `}
+    defaultCode={`
+function Example(props) {
+  const [showModal, setShowModal] = React.useState(false);
+
+  return (
+    <Box marginLeft={-1} marginRight={-1}>
+      <Upsell
+        title="Give $30, get $60 in ads credit"
+        message="Earn $60 of ads credit, and give $30 of ads credit to a friend"
+        primaryAction={{onClick: () => { setShowModal(!showModal) }, label:"Send invite"}}
+        dismissButton={{
+          accessibilityLabel: 'Dismiss banner',
+          onDismiss: ()=>{},
+        }}
+        imageData={{
+          component: <Icon icon="pinterest" accessibilityLabel="Pin" color="darkGray" size={32}/>
+        }}
+      />
+      {showModal && (
+        <Layer>
+          <Modal
+            accessibilityModalLabel="Would you like to sign up"
+            heading="Invite Friends?"
+            onDismiss={() => { setShowModal(!showModal) }}
+            footer={
+              <Box
+                display="flex"
+                justifyContent="center"
+              >
+                <ButtonGroup>
+                  <Button
+                    size="lg"
+                    text="Cancel"
+                    onClick={() => { setShowModal(!showModal) }}
+                  />
+                  <Button
+                    size="lg"
+                    color="red"
+                    text="Sign up"
+                    onClick={() => { setShowModal(!showModal) }}
+                  />
+                </ButtonGroup>
+              </Box>
+            }
+            role="alertdialog"
+            size="sm"
+          >
+            <Box paddingX={8}>
+              <Text align="center">
+                When your friend spends their first $30 on ads, you’ll earn $60 of ads credit, and they’ll get $30 of ads credit, too
+              </Text>
+            </Box>
+          </Modal>
+        </Layer>
+      )}
+    </Box>
+  );
+}
+`}
+  />
+);
+
 export default cards;
diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.input.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.input.js
new file mode 100644
index 0000000000..e00d059d52
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.input.js
@@ -0,0 +1,24 @@
+// @flow strict
+import React from 'react';
+import { Box, Callout, Upsell } from 'gestalt';
+
+export default function TestBox() {
+  return (
+    <Box>
+      <Callout
+        message="Insert a clever info callout message here"
+        iconAccessibilityLabel="info"
+        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        type="info"
+        title="A Title"
+      />
+      <Upsell
+        message="Insert a clever upsell message here"
+        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        title="A Title"
+      />
+    </Box>
+  );
+}
diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.output.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.output.js
new file mode 100644
index 0000000000..7dd130e5a8
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.output.js
@@ -0,0 +1,24 @@
+// @flow strict
+import React from 'react';
+import { Box, Callout, Upsell } from 'gestalt';
+
+export default function TestBox() {
+  return (
+    <Box>
+      <Callout
+        message="Insert a clever info callout message here"
+        iconAccessibilityLabel="info"
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        type="info"
+        title="A Title"
+      />
+      <Upsell
+        message="Insert a clever upsell message here"
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        title="A Title"
+      />
+    </Box>
+  );
+}
diff --git a/packages/gestalt-codemods/16.0.0/__tests__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.test.js b/packages/gestalt-codemods/16.0.0/__tests__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.test.js
new file mode 100644
index 0000000000..59ba41950b
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__tests__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.test.js
@@ -0,0 +1,28 @@
+import { defineTest } from 'jscodeshift/dist/testUtils.js';
+
+jest.mock(
+  '../callout-upsell-primary-secondary-action-replace-primary-secondary-link',
+  () => {
+    return Object.assign(
+      jest.requireActual(
+        '../callout-upsell-primary-secondary-action-replace-primary-secondary-link'
+      ),
+      {
+        parser: 'flow',
+      }
+    );
+  }
+);
+
+describe('callout-upsell-primary-secondary-action-replace-primary-secondary-link', () => {
+  [
+    'callout-upsell-primary-secondary-action-replace-primary-secondary-link',
+  ].forEach((test) => {
+    defineTest(
+      __dirname,
+      'callout-upsell-primary-secondary-action-replace-primary-secondary-link',
+      { quote: 'single' },
+      test
+    );
+  });
+});
diff --git a/packages/gestalt-codemods/16.0.0/callout-upsell-primary-secondary-action-replace-primary-secondary-link.js b/packages/gestalt-codemods/16.0.0/callout-upsell-primary-secondary-action-replace-primary-secondary-link.js
new file mode 100644
index 0000000000..0aabeab483
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/callout-upsell-primary-secondary-action-replace-primary-secondary-link.js
@@ -0,0 +1,64 @@
+/*
+ * Converts
+ *  <Callout primaryLink={...} secondaryLink={...} /> to <Callout primaryAction={...} secondaryAction={...} />
+ *  <Upsell primaryLink={...} secondaryLink={...} /> to <Upsell primaryAction={...} secondaryAction={...} />
+ */
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const src = j(file.source);
+  let localIdentifierName;
+  let fileHasModifications = false;
+
+  src.find(j.ImportDeclaration).forEach((path) => {
+    const decl = path.node;
+    if (decl.source.value !== 'gestalt') {
+      return null;
+    }
+
+    localIdentifierName = decl.specifiers
+      .filter((node) => ['Upsell', 'Callout'].includes(node.imported.name))
+      .map((node) => node.local.name);
+    return null;
+  });
+
+  if (!localIdentifierName) {
+    return null;
+  }
+
+  const transform = src
+    .find(j.JSXElement)
+    .forEach((jsxElement) => {
+      const { node } = jsxElement;
+
+      if (!localIdentifierName.includes(node.openingElement.name.name)) {
+        return null;
+      }
+
+      const attrs = node.openingElement.attributes;
+
+      const newAppendAttr = [];
+      const newAttrs = attrs
+        .map((attr) => {
+          if (attr?.name?.name && attr.name.name === 'primaryLink') {
+            const renamedAttr = { ...attr };
+            renamedAttr.name.name = 'primaryAction';
+            return renamedAttr;
+          }
+          if (attr?.name?.name && attr.name.name === 'secondaryLink') {
+            const renamedAttr = { ...attr };
+            renamedAttr.name.name = 'secondaryAction';
+            return renamedAttr;
+          }
+          return attr;
+        })
+        .filter(Boolean);
+
+      fileHasModifications = true;
+      node.openingElement.attributes = [...newAppendAttr, ...newAttrs];
+      return null;
+    })
+    .toSource();
+
+  return fileHasModifications ? transform : null;
+}
diff --git a/packages/gestalt/src/Callout.js b/packages/gestalt/src/Callout.js
index 31da9f0801..2e894218bd 100644
--- a/packages/gestalt/src/Callout.js
+++ b/packages/gestalt/src/Callout.js
@@ -13,9 +13,9 @@ import { type AbstractEventHandler } from './AbstractEventHandler.js';
 import styles from './Callout.css';
 import useResponsiveMinWidth from './useResponsiveMinWidth.js';
 
-type LinkData = {|
+type ActionData = {|
   accessibilityLabel?: string,
-  href: string,
+  href?: string,
   label: string,
   onClick?: AbstractEventHandler<
     | SyntheticMouseEvent<HTMLButtonElement>
@@ -32,8 +32,8 @@ type Props = {|
   |},
   iconAccessibilityLabel: string,
   message: string,
-  primaryLink?: LinkData,
-  secondaryLink?: LinkData,
+  primaryAction?: ActionData,
+  secondaryAction?: ActionData,
   type: 'error' | 'info' | 'warning',
   title?: string,
 |};
@@ -56,12 +56,12 @@ const CALLOUT_TYPE_ATTRIBUTES = {
   },
 };
 
-const CalloutLink = ({
+const CalloutAction = ({
   data,
   stacked,
   type,
 }: {|
-  data: LinkData,
+  data: ActionData,
   stacked?: boolean,
   type: string,
 |}): Node => {
@@ -71,7 +71,7 @@ const CalloutLink = ({
   if (isDarkMode && type === 'secondary') {
     color = 'transparentWhiteText';
   }
-  const { accessibilityLabel, href, label, onClick } = data;
+  const { accessibilityLabel, label, onClick, href } = data;
 
   return (
     <Box
@@ -84,15 +84,26 @@ const CalloutLink = ({
       smMarginTop="auto"
       smMarginBottom="auto"
     >
-      <Button
-        accessibilityLabel={accessibilityLabel}
-        color={color}
-        href={href}
-        onClick={onClick}
-        role="link"
-        size="lg"
-        text={label}
-      />
+      {href ? (
+        <Button
+          accessibilityLabel={accessibilityLabel}
+          color={color}
+          href={href}
+          onClick={onClick}
+          role="link"
+          size="lg"
+          text={label}
+        />
+      ) : (
+        <Button
+          accessibilityLabel={accessibilityLabel}
+          color={color}
+          onClick={onClick}
+          role="button"
+          size="lg"
+          text={label}
+        />
+      )}
     </Box>
   );
 };
@@ -101,8 +112,8 @@ export default function Callout({
   dismissButton,
   iconAccessibilityLabel,
   message,
-  primaryLink,
-  secondaryLink,
+  primaryAction,
+  secondaryAction,
   type,
   title,
 }: Props): Node {
@@ -140,8 +151,8 @@ export default function Callout({
           smDirection="row"
           justifyContent="center"
           alignItems="center"
-          marginBottom={primaryLink || secondaryLink ? 4 : undefined}
-          smMarginBottom={primaryLink || secondaryLink ? 0 : undefined}
+          marginBottom={primaryAction || secondaryAction ? 4 : undefined}
+          smMarginBottom={primaryAction || secondaryAction ? 0 : undefined}
           smPaddingY={3}
         >
           <Box
@@ -183,15 +194,17 @@ export default function Callout({
           </Box>
         </Box>
         <Box smDisplay="flex" marginStart="auto" smMarginEnd={4} smPaddingY={3}>
-          {secondaryLink && responsiveMinWidth !== 'xs' && (
-            <CalloutLink type="secondary" data={secondaryLink} />
+          {secondaryAction && responsiveMinWidth !== 'xs' && (
+            <CalloutAction type="secondary" data={secondaryAction} />
+          )}
+          {primaryAction && (
+            <CalloutAction type="primary" data={primaryAction} />
           )}
-          {primaryLink && <CalloutLink type="primary" data={primaryLink} />}
-          {secondaryLink && responsiveMinWidth === 'xs' && (
-            <CalloutLink
+          {secondaryAction && responsiveMinWidth === 'xs' && (
+            <CalloutAction
               type="secondary"
-              data={secondaryLink}
-              stacked={!!secondaryLink}
+              data={secondaryAction}
+              stacked={!!secondaryAction}
             />
           )}
         </Box>
@@ -222,15 +235,15 @@ Callout.propTypes = {
   iconAccessibilityLabel: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
   // $FlowFixMe[signature-verification-failure] flow 0.135.0 upgrade
-  primaryLink: PropTypes.shape({
-    href: PropTypes.string.isRequired,
+  primaryAction: PropTypes.shape({
+    href: PropTypes.string,
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     accessibilityLabel: PropTypes.string,
   }),
   // $FlowFixMe[signature-verification-failure] flow 0.135.0 upgrade
-  secondaryLink: PropTypes.shape({
-    href: PropTypes.string.isRequired,
+  secondaryAction: PropTypes.shape({
+    href: PropTypes.string,
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     accessibilityLabel: PropTypes.string,
diff --git a/packages/gestalt/src/Callout.test.js b/packages/gestalt/src/Callout.test.js
index 9a772da345..7a794056f3 100644
--- a/packages/gestalt/src/Callout.test.js
+++ b/packages/gestalt/src/Callout.test.js
@@ -49,12 +49,12 @@ describe('<Callout />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink', () => {
+  test('message + title + primaryAction with href', () => {
     const tree = create(
       <Callout
         message="Insert a clever info callout message here"
         iconAccessibilityLabel="info"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
         type="info"
         title="A Title"
       />
@@ -62,13 +62,12 @@ describe('<Callout />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink + secondaryLink', () => {
+  test('message + title + primaryAction without href', () => {
     const tree = create(
       <Callout
         message="Insert a clever info callout message here"
         iconAccessibilityLabel="info"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
-        secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        primaryAction={{ label: 'Visit Pinterest' }}
         type="info"
         title="A Title"
       />
@@ -76,12 +75,26 @@ describe('<Callout />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink + dismissButton', () => {
+  test('message + title + primaryAction + secondaryAction', () => {
     const tree = create(
       <Callout
         message="Insert a clever info callout message here"
         iconAccessibilityLabel="info"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        type="info"
+        title="A Title"
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('message + title + primaryAction + dismissButton', () => {
+    const tree = create(
+      <Callout
+        message="Insert a clever info callout message here"
+        iconAccessibilityLabel="info"
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
         dismissButton={{
           accessibilityLabel: 'Dismiss banner',
           onDismiss: () => {},
diff --git a/packages/gestalt/src/Upsell.js b/packages/gestalt/src/Upsell.js
index c71851ee5a..988084edb8 100644
--- a/packages/gestalt/src/Upsell.js
+++ b/packages/gestalt/src/Upsell.js
@@ -14,9 +14,9 @@ import { type AbstractEventHandler } from './AbstractEventHandler.js';
 import styles from './Upsell.css';
 import useResponsiveMinWidth from './useResponsiveMinWidth.js';
 
-type LinkData = {|
+type ActionData = {|
   accessibilityLabel?: string,
-  href: string,
+  href?: string,
   label: string,
   onClick?: AbstractEventHandler<
     | SyntheticMouseEvent<HTMLButtonElement>
@@ -40,17 +40,17 @@ type Props = {|
     width?: number,
   |},
   message: string,
-  primaryLink?: LinkData,
-  secondaryLink?: LinkData,
+  primaryAction?: ActionData,
+  secondaryAction?: ActionData,
   title?: string,
 |};
 
-const UpsellLink = ({
+const UpsellAction = ({
   data,
   stacked,
   type,
 }: {|
-  data: LinkData,
+  data: ActionData,
   stacked?: boolean,
   type: string,
 |}): Node => {
@@ -68,15 +68,26 @@ const UpsellLink = ({
       smMarginTop="auto"
       smMarginBottom="auto"
     >
-      <Button
-        accessibilityLabel={accessibilityLabel}
-        color={color}
-        href={href}
-        onClick={onClick}
-        role="link"
-        size="lg"
-        text={label}
-      />
+      {href ? (
+        <Button
+          accessibilityLabel={accessibilityLabel}
+          color={color}
+          href={href}
+          onClick={onClick}
+          role="link"
+          size="lg"
+          text={label}
+        />
+      ) : (
+        <Button
+          accessibilityLabel={accessibilityLabel}
+          color={color}
+          onClick={onClick}
+          role="button"
+          size="lg"
+          text={label}
+        />
+      )}
     </Box>
   );
 };
@@ -85,8 +96,8 @@ export default function Upsell({
   dismissButton,
   imageData,
   message,
-  primaryLink,
-  secondaryLink,
+  primaryAction,
+  secondaryAction,
   title,
 }: Props): Node {
   const isImage = imageData?.component && imageData.component.type === Image;
@@ -116,8 +127,8 @@ export default function Upsell({
           smDirection="row"
           justifyContent="center"
           alignItems="center"
-          marginBottom={primaryLink || secondaryLink ? 4 : undefined}
-          smMarginBottom={primaryLink || secondaryLink ? 0 : undefined}
+          marginBottom={primaryAction || secondaryAction ? 4 : undefined}
+          smMarginBottom={primaryAction || secondaryAction ? 0 : undefined}
           smPaddingY={3}
         >
           {imageData && (
@@ -167,15 +178,17 @@ export default function Upsell({
           </Box>
         </Box>
         <Box smDisplay="flex" marginStart="auto" smMarginEnd={4} smPaddingY={3}>
-          {secondaryLink && responsiveMinWidth !== 'xs' && (
-            <UpsellLink type="secondary" data={secondaryLink} />
+          {secondaryAction && responsiveMinWidth !== 'xs' && (
+            <UpsellAction type="secondary" data={secondaryAction} />
+          )}
+          {primaryAction && (
+            <UpsellAction type="primary" data={primaryAction} />
           )}
-          {primaryLink && <UpsellLink type="primary" data={primaryLink} />}
-          {secondaryLink && responsiveMinWidth === 'xs' && (
-            <UpsellLink
+          {secondaryAction && responsiveMinWidth === 'xs' && (
+            <UpsellAction
               type="secondary"
-              data={secondaryLink}
-              stacked={!!secondaryLink}
+              data={secondaryAction}
+              stacked={!!secondaryAction}
             />
           )}
         </Box>
@@ -213,15 +226,15 @@ Upsell.propTypes = {
   }),
   message: PropTypes.string.isRequired,
   // $FlowFixMe[signature-verification-failure] flow 0.135.0 upgrade
-  primaryLink: PropTypes.shape({
-    href: PropTypes.string.isRequired,
+  primaryAction: PropTypes.shape({
+    href: PropTypes.string,
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     accessibilityLabel: PropTypes.string,
   }),
   // $FlowFixMe[signature-verification-failure] flow 0.135.0 upgrade
-  secondaryLink: PropTypes.shape({
-    href: PropTypes.string.isRequired,
+  secondaryAction: PropTypes.shape({
+    href: PropTypes.string,
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     accessibilityLabel: PropTypes.string,
diff --git a/packages/gestalt/src/Upsell.test.js b/packages/gestalt/src/Upsell.test.js
index 3e08c3fa6c..e5766308de 100644
--- a/packages/gestalt/src/Upsell.test.js
+++ b/packages/gestalt/src/Upsell.test.js
@@ -19,34 +19,45 @@ describe('<Upsell />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink', () => {
+  test('message + title + primaryAction with href', () => {
     const tree = create(
       <Upsell
         message="Insert a clever upsell message here"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
         title="A Title"
       />
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink + secondaryLink', () => {
+  test('message + title + primaryAction without href', () => {
     const tree = create(
       <Upsell
         message="Insert a clever upsell message here"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
-        secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        primaryAction={{ label: 'Visit Pinterest' }}
         title="A Title"
       />
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink + dismissButton', () => {
+  test('message + title + primaryAction + secondaryAction', () => {
     const tree = create(
       <Upsell
         message="Insert a clever upsell message here"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        title="A Title"
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('message + title + primaryAction + dismissButton', () => {
+    const tree = create(
+      <Upsell
+        message="Insert a clever upsell message here"
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
         dismissButton={{
           accessibilityLabel: 'Dismiss banner',
           onDismiss: () => {},
@@ -57,11 +68,11 @@ describe('<Upsell />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink + dismissButton + image', () => {
+  test('message + title + primaryAction + dismissButton + image', () => {
     const tree = create(
       <Upsell
         message="Insert a clever upsell message here"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
         dismissButton={{
           accessibilityLabel: 'Dismiss banner',
           onDismiss: () => {},
diff --git a/packages/gestalt/src/__snapshots__/Callout.test.js.snap b/packages/gestalt/src/__snapshots__/Callout.test.js.snap
index 493b8079e6..685f2bae80 100644
--- a/packages/gestalt/src/__snapshots__/Callout.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/Callout.test.js.snap
@@ -189,7 +189,7 @@ exports[`<Callout /> Warning Callout 1`] = `
 </div>
 `;
 
-exports[`<Callout /> message + title + primaryLink + dismissButton 1`] = `
+exports[`<Callout /> message + title + primaryAction + dismissButton 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
   style={
@@ -337,7 +337,7 @@ exports[`<Callout /> message + title + primaryLink + dismissButton 1`] = `
 </div>
 `;
 
-exports[`<Callout /> message + title + primaryLink + secondaryLink 1`] = `
+exports[`<Callout /> message + title + primaryAction + secondaryAction 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
   style={
@@ -470,7 +470,7 @@ exports[`<Callout /> message + title + primaryLink + secondaryLink 1`] = `
 </div>
 `;
 
-exports[`<Callout /> message + title + primaryLink 1`] = `
+exports[`<Callout /> message + title + primaryAction with href 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
   style={
@@ -573,6 +573,103 @@ exports[`<Callout /> message + title + primaryLink 1`] = `
 </div>
 `;
 
+exports[`<Callout /> message + title + primaryAction without href 1`] = `
+<div
+  className="box paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  style={
+    Object {
+      "backgroundColor": "#EBF4FE",
+    }
+  }
+>
+  <div
+    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    style={
+      Object {
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      className="box itemsCenter justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex"
+    >
+      <div
+        className="box marginBottom4 marginTop0 smMarginBottomAuto smMarginTopAuto"
+      >
+        <svg
+          aria-hidden={null}
+          aria-label="info"
+          className="icon blue iconBlock"
+          height={32}
+          role="img"
+          viewBox="0 0 24 24"
+          width={32}
+        >
+          <path
+            d="test-file-stub"
+          />
+        </svg>
+      </div>
+      <div
+        className="box marginBottomAuto marginTopAuto paddingX6"
+        style={
+          Object {
+            "maxWidth": 648,
+          }
+        }
+      >
+        <div
+          className="box itemsCenter marginBottomAuto marginTopAuto smDisplayBlock xsDirectionColumn xsDisplayFlex"
+        >
+          <div
+            className="box marginBottom2"
+          >
+            <h3
+              className="Heading fontSize1 darkGray alignLeft breakWord"
+            >
+              A Title
+            </h3>
+          </div>
+          <div
+            className="Text fontSize3 darkGray alignLeft breakWord fontWeightNormal"
+          >
+            Insert a clever info callout message here
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+    >
+      <div
+        className="box itemsCenter justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock"
+      >
+        <button
+          className="button hideOutline tapTransition lg white enabled block accessibilityOutline"
+          disabled={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          <div
+            className="Text fontSize3 darkGray alignCenter fontWeightBold"
+          >
+            Visit Pinterest
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<Callout /> message + title 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
diff --git a/packages/gestalt/src/__snapshots__/Upsell.test.js.snap b/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
index 5266379c94..57938e96f6 100644
--- a/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
@@ -41,7 +41,7 @@ exports[`<Upsell /> Basic Upsell 1`] = `
 </div>
 `;
 
-exports[`<Upsell /> message + title + primaryLink + dismissButton + image 1`] = `
+exports[`<Upsell /> message + title + primaryAction + dismissButton + image 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
 >
@@ -199,7 +199,7 @@ exports[`<Upsell /> message + title + primaryLink + dismissButton + image 1`] =
 </div>
 `;
 
-exports[`<Upsell /> message + title + primaryLink + dismissButton 1`] = `
+exports[`<Upsell /> message + title + primaryAction + dismissButton 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
 >
@@ -325,7 +325,7 @@ exports[`<Upsell /> message + title + primaryLink + dismissButton 1`] = `
 </div>
 `;
 
-exports[`<Upsell /> message + title + primaryLink + secondaryLink 1`] = `
+exports[`<Upsell /> message + title + primaryAction + secondaryAction 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
 >
@@ -436,7 +436,7 @@ exports[`<Upsell /> message + title + primaryLink + secondaryLink 1`] = `
 </div>
 `;
 
-exports[`<Upsell /> message + title + primaryLink 1`] = `
+exports[`<Upsell /> message + title + primaryAction with href 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
 >
@@ -517,6 +517,81 @@ exports[`<Upsell /> message + title + primaryLink 1`] = `
 </div>
 `;
 
+exports[`<Upsell /> message + title + primaryAction without href 1`] = `
+<div
+  className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+>
+  <div
+    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    style={
+      Object {
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      className="box itemsCenter justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex"
+    >
+      <div
+        className="box"
+        style={
+          Object {
+            "maxWidth": 648,
+          }
+        }
+      >
+        <div
+          className="box itemsCenter marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd6 smMarginStart0 xsDirectionColumn xsDisplayFlex"
+        >
+          <div
+            className="box marginBottom2"
+          >
+            <h3
+              className="Heading fontSize1 darkGray alignLeft breakWord"
+            >
+              A Title
+            </h3>
+          </div>
+          <div
+            className="Text fontSize3 darkGray alignLeft breakWord fontWeightNormal"
+          >
+            Insert a clever upsell message here
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+    >
+      <div
+        className="box itemsCenter justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock"
+      >
+        <button
+          className="button hideOutline tapTransition lg red enabled block accessibilityOutline"
+          disabled={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          <div
+            className="Text fontSize3 white alignCenter fontWeightBold"
+          >
+            Visit Pinterest
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<Upsell /> message + title 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"