diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index d1440d6b..b6ccbc74 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -14,6 +14,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added read-only custom properties `--auto-size-available-width` and `--auto-size-available-height` to `<sl-popup>` to improve support for overflowing popup content
 - Fixed a bug where auto-size wasn't being applied to `<sl-dropdown>` and `<sl-select>`
 - Fixed a bug in `<sl-popup>` that caused auto-size to kick in before flip
+- Fixed a bug in `<sl-popup>` that prevented the `arrow-padding` attribute from working as expected
 - Removed the default hover effect in `<sl-tree-items>` to make selections more obvious
 
 ## 2.0.0-beta.80
diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts
index 583a3dac..fbf5bb1f 100644
--- a/src/components/popup/popup.ts
+++ b/src/components/popup/popup.ts
@@ -89,7 +89,7 @@ export default class SlPopup extends LitElement {
    * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
    * this will prevent it from overflowing the corners.
    */
-  @property({ type: Number }) arrowPadding = 10;
+  @property({ attribute: 'arrow-padding', type: Number }) arrowPadding = 10;
 
   /**
    * When set, placement of the popup will flip to the opposite site to keep it in view. You can use