diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index 2f832f7fa..e7e7d7fc8 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -98,7 +98,10 @@ const containerStyles: Interpolation<
           },
         }
       : {}),
-    marginRight: theme.space.small,
+
+    "* + &": {
+      marginLeft: theme.space.small,
+    },
   }
 }
 
diff --git a/src/Button/README.md b/src/Button/README.md
index 27e6358aa..19bdfe95d 100644
--- a/src/Button/README.md
+++ b/src/Button/README.md
@@ -70,6 +70,26 @@ Using a `to` prop navigates automatically, and render proper anchor tags with hr
 <Button to="/some-url">Button One</Button>
 ```
 
+### Neighbor Behavior
+
+`Button`s placed next to other elements need to space their surroundings correctly, whereas individual `Button`s don't displace anything.
+
+```jsx
+<Card
+  action={
+    <>
+      <Button condensed>I should have a right margin</Button>
+      <Button condensed>I should not have a right margin</Button>
+    </>
+  }
+>
+  <div style={{ border: "1px solid red", width: "fit-content" }}>
+    <Button condensed>I should have a right margin</Button>
+    <Button condensed>I should not have a right margin</Button>
+  </div>
+</Card>
+```
+
 ### Full-width Buttons
 
 ```jsx
diff --git a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
index ca16dbb6b..1b775be1d 100644
--- a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Button Component Should initialize properly 1`] = `
     class="css-ar73w8-Messages"
   />
   <button
-    class="css-19mfxrd-button"
+    class="css-11s4t93-button"
   >
     hi
   </button>
diff --git a/src/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.tsx.snap b/src/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.tsx.snap
index 36db88e06..05803a354 100644
--- a/src/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.tsx.snap
+++ b/src/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`ButtonGroup Component Should initialize properly 1`] = `
     class="css-1o7twmc-buttongroup"
   >
     <button
-      class="css-19mfxrd-button"
+      class="css-11s4t93-button"
     >
       Hello
     </button>
diff --git a/src/Paginator/__tests__/__snapshots__/Paginator.test.tsx.snap b/src/Paginator/__tests__/__snapshots__/Paginator.test.tsx.snap
index 7f0556a62..9557126f3 100644
--- a/src/Paginator/__tests__/__snapshots__/Paginator.test.tsx.snap
+++ b/src/Paginator/__tests__/__snapshots__/Paginator.test.tsx.snap
@@ -11,13 +11,13 @@ exports[`Paginator Component Should initialize properly 1`] = `
     class="css-g700yk-paginator"
   >
     <button
-      class="css-1bcwm3d-button"
+      class="css-tq148m-button"
       type="first"
     >
       first
     </button>
     <button
-      class="css-1dxr53j-button"
+      class="css-pdfiqa-button"
       type="previous"
     >
       <svg
@@ -44,7 +44,7 @@ exports[`Paginator Component Should initialize properly 1`] = `
        of 258
     </div>
     <button
-      class="css-1dxr53j-button"
+      class="css-pdfiqa-button"
       type="next"
     >
       <span>
@@ -63,7 +63,7 @@ exports[`Paginator Component Should initialize properly 1`] = `
       </svg>
     </button>
     <button
-      class="css-1bcwm3d-button"
+      class="css-tq148m-button"
       type="last"
     >
       last