diff --git a/.changeset/feat-heading-add-props.md b/.changeset/feat-heading-add-props.md
new file mode 100644
index 0000000000..cfd57cc20e
--- /dev/null
+++ b/.changeset/feat-heading-add-props.md
@@ -0,0 +1,4 @@
+---
+'react-magma-dom': patch
+---
+patch(Heading): Add the `noTopMargin` and `noBottomMargin` props to the `Heading` component.
diff --git a/packages/react-magma-dom/src/components/Heading/Heading.stories.tsx b/packages/react-magma-dom/src/components/Heading/Heading.stories.tsx
index f2552808d0..93de14c5ec 100644
--- a/packages/react-magma-dom/src/components/Heading/Heading.stories.tsx
+++ b/packages/react-magma-dom/src/components/Heading/Heading.stories.tsx
@@ -18,6 +18,24 @@ export default {
       },
       defaultValue: false,
     },
+    noMargins: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+    noTopMargin: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+    noBottomMargin: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
   },
 } as Meta;
 
diff --git a/packages/react-magma-dom/src/components/Heading/Heading.test.js b/packages/react-magma-dom/src/components/Heading/Heading.test.js
index 984f31db03..d1edf3a19a 100644
--- a/packages/react-magma-dom/src/components/Heading/Heading.test.js
+++ b/packages/react-magma-dom/src/components/Heading/Heading.test.js
@@ -174,6 +174,120 @@ describe('Heading', () => {
     expect(getByText(headingText6)).toHaveStyleRule('margin', '0');
   });
 
+  it('should render headings without top margin styles', () => {
+    const headingText1 = 'test 1';
+    const headingText2 = 'test 2';
+    const headingText3 = 'test 3';
+    const headingText4 = 'test 4';
+    const headingText5 = 'test 5';
+    const headingText6 = 'test 6';
+
+    const { getByText } = render(
+      <>
+        <Heading noTopMargin level={1}>
+          {headingText1}
+        </Heading>
+        <Heading noTopMargin level={2}>
+          {headingText2}
+        </Heading>
+        <Heading noTopMargin level={3}>
+          {headingText3}
+        </Heading>
+        <Heading noTopMargin level={4}>
+          {headingText4}
+        </Heading>
+        <Heading noTopMargin level={5}>
+          {headingText5}
+        </Heading>
+        <Heading noTopMargin level={6}>
+          {headingText6}
+        </Heading>
+      </>
+    );
+
+    expect(getByText(headingText1)).toHaveStyleRule(
+      'margin',
+      `0 0 ${magma.spaceScale.spacing05} 0`
+    );
+    expect(getByText(headingText2)).toHaveStyleRule(
+      'margin',
+      `0 0 ${magma.spaceScale.spacing05} 0`
+    );
+    expect(getByText(headingText3)).toHaveStyleRule(
+      'margin',
+      `0 0 ${magma.spaceScale.spacing05} 0`
+    );
+    expect(getByText(headingText4)).toHaveStyleRule(
+      'margin',
+      `0 0 ${magma.spaceScale.spacing05} 0`
+    );
+    expect(getByText(headingText5)).toHaveStyleRule(
+      'margin',
+      `0 0 ${magma.spaceScale.spacing05} 0`
+    );
+    expect(getByText(headingText6)).toHaveStyleRule(
+      'margin',
+      `0 0 ${magma.spaceScale.spacing03} 0`
+    );
+  });
+
+  it('should render headings without bottom margin styles', () => {
+    const headingText1 = 'test 1';
+    const headingText2 = 'test 2';
+    const headingText3 = 'test 3';
+    const headingText4 = 'test 4';
+    const headingText5 = 'test 5';
+    const headingText6 = 'test 6';
+
+    const { getByText } = render(
+      <>
+        <Heading noBottomMargin level={1}>
+          {headingText1}
+        </Heading>
+        <Heading noBottomMargin level={2}>
+          {headingText2}
+        </Heading>
+        <Heading noBottomMargin level={3}>
+          {headingText3}
+        </Heading>
+        <Heading noBottomMargin level={4}>
+          {headingText4}
+        </Heading>
+        <Heading noBottomMargin level={5}>
+          {headingText5}
+        </Heading>
+        <Heading noBottomMargin level={6}>
+          {headingText6}
+        </Heading>
+      </>
+    );
+
+    expect(getByText(headingText1)).toHaveStyleRule(
+      'margin',
+      `${magma.spaceScale.spacing05} 0 0 0`
+    );
+    expect(getByText(headingText2)).toHaveStyleRule(
+      'margin',
+      `${magma.spaceScale.spacing10} 0 0 0`
+    );
+    expect(getByText(headingText3)).toHaveStyleRule(
+      'margin',
+      `${magma.spaceScale.spacing09} 0 0 0`
+    );
+    expect(getByText(headingText4)).toHaveStyleRule(
+      'margin',
+      `${magma.spaceScale.spacing08} 0 0 0`
+    );
+    expect(getByText(headingText5)).toHaveStyleRule(
+      'margin',
+      `${magma.spaceScale.spacing06} 0 0 0`
+    );
+    expect(getByText(headingText6)).toHaveStyleRule(
+      'margin',
+      `${magma.spaceScale.spacing06} 0 0 0`
+    );
+  });
+
   it('should render inverse styles', () => {
     const headingText = 'test';
     const { getByText } = render(
diff --git a/website/react-magma-docs/src/pages/api/heading.mdx b/website/react-magma-docs/src/pages/api/heading.mdx
index 6d95cb4b7f..fdfb426643 100644
--- a/website/react-magma-docs/src/pages/api/heading.mdx
+++ b/website/react-magma-docs/src/pages/api/heading.mdx
@@ -239,6 +239,74 @@ export function Example() {
 }
 ```
 
+## No Top Margin
+
+When the `noTopMargin` prop is used, the element will have a top margin value of 0.
+
+```tsx
+import React from 'react';
+import { Heading } from 'react-magma-dom';
+
+export function Example() {
+  return (
+    <>
+      <Heading noTopMargin level={1}>
+        Heading 1
+      </Heading>
+      <Heading noTopMargin level={2}>
+        Heading 2
+      </Heading>
+      <Heading noTopMargin level={3}>
+        Heading 3
+      </Heading>
+      <Heading noTopMargin level={4}>
+        Heading 4
+      </Heading>
+      <Heading noTopMargin level={5}>
+        Heading 5
+      </Heading>
+      <Heading noTopMargin level={6}>
+        Heading 6
+      </Heading>
+    </>
+  );
+}
+```
+
+## No Bottom Margin
+
+When the `noBottomMargin` prop is used, the element will have a bottom margin value of 0.
+
+```tsx
+import React from 'react';
+import { Heading } from 'react-magma-dom';
+
+export function Example() {
+  return (
+    <>
+      <Heading noBottomMargin level={1}>
+        Heading 1
+      </Heading>
+      <Heading noBottomMargin level={2}>
+        Heading 2
+      </Heading>
+      <Heading noBottomMargin level={3}>
+        Heading 3
+      </Heading>
+      <Heading noBottomMargin level={4}>
+        Heading 4
+      </Heading>
+      <Heading noBottomMargin level={5}>
+        Heading 5
+      </Heading>
+      <Heading noBottomMargin level={6}>
+        Heading 6
+      </Heading>
+    </>
+  );
+}
+```
+
 ## Forward Ref
 
 Using React's `forwardRef` feature you can gain access to the reference of the internal heading.