diff --git a/.changeset/tender-kings-approve.md b/.changeset/tender-kings-approve.md
new file mode 100644
index 00000000000..4597a502e75
--- /dev/null
+++ b/.changeset/tender-kings-approve.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated badge spacing to right align with secondary action icons
diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
index dc1b134f1a8..fdbe9e10ea7 100644
--- a/polaris-react/src/components/Navigation/Navigation.scss
+++ b/polaris-react/src/components/Navigation/Navigation.scss
@@ -159,12 +159,17 @@ $disabled-fade: 0.6;
margin-left: var(--p-space-2);
display: inline-flex;
margin-top: var(--p-space-2);
+ margin-right: var(--p-space-2);
@media #{$p-breakpoints-md-up} {
margin-top: var(--p-space-1);
}
}
+.ListItem-hasAction .Badge {
+ margin-right: 0;
+}
+
.Icon {
@include nav-item-icon-attributes;
}
diff --git a/polaris-react/src/components/Navigation/Navigation.stories.tsx b/polaris-react/src/components/Navigation/Navigation.stories.tsx
index 68ff665c8b3..b5bbfbadb15 100644
--- a/polaris-react/src/components/Navigation/Navigation.stories.tsx
+++ b/polaris-react/src/components/Navigation/Navigation.stories.tsx
@@ -606,3 +606,95 @@ export function UsingMajorIcons() {
);
}
+
+export function WithBadgeAndSecondaryAction() {
+ return (
+
+
+
+
+
+ );
+}