diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js
index 2f4f4e2b82235f..5fc1c09b278b3a 100644
--- a/packages/components/src/popover/stories/index.js
+++ b/packages/components/src/popover/stories/index.js
@@ -30,12 +30,14 @@ export const _default = () => {
 		'firstElement'
 	);
 	const noArrow = boolean( 'noArrow', false );
+	const isAlternate = boolean( 'isAlternate', false );
 
 	const props = {
 		animate,
 		children,
 		focusOnMount,
 		noArrow,
+		isAlternate,
 	};
 
 	if ( ! show ) {
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index 79d1a694a703e5..75fef0850bf4f7 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -29,7 +29,11 @@ $arrow-size: 8px;
 		margin-left: 2px;
 
 		&::before {
-			border: $arrow-size solid $gray-900;
+			border: $arrow-size solid $gray-400;
+		}
+
+		&.is-alternate::before {
+			border-color: $gray-900;
 		}
 
 		&::after {