diff --git a/pages/annotation-context/with-iframe.page.tsx b/pages/annotation-context/with-iframe.page.tsx
new file mode 100644
index 0000000000..8e05336493
--- /dev/null
+++ b/pages/annotation-context/with-iframe.page.tsx
@@ -0,0 +1,45 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Box, SpaceBetween } from '~components';
+import AnnotationContext from '~components/annotation-context';
+import Hotspot from '~components/hotspot';
+
+import { annotationContextStrings } from '../onboarding/i18n';
+import tutorials from '../onboarding/tutorials';
+import { IframeWrapper } from '../utils/iframe-wrapper';
+
+const tutorial = tutorials(() => {})[0];
+
+function IframeContent() {
+ return (
+ {}}
+ onExitTutorial={() => {}}
+ >
+
+
+
+ Hotspot 1:
+
+
+ Hotspot 2:
+
+
+
+
+ );
+}
+
+export default function () {
+ return (
+
+ Annotation context in iframe
+ Click the hotspot icons — the annotation popover should appear inside the iframe.
+
+
+ );
+}
diff --git a/pages/button-dropdown/disabled-reason-iframe.page.tsx b/pages/button-dropdown/disabled-reason-iframe.page.tsx
new file mode 100644
index 0000000000..ff68fdcd7a
--- /dev/null
+++ b/pages/button-dropdown/disabled-reason-iframe.page.tsx
@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Box } from '~components';
+
+import { IframeWrapper } from '../utils/iframe-wrapper';
+import { DisabledReasonDemo } from './disabled-reason.page';
+
+export default function () {
+ return (
+
+ ButtonDropdown disabled reason in iframe
+
+
+ );
+}
diff --git a/pages/button-dropdown/disabled-reason.page.tsx b/pages/button-dropdown/disabled-reason.page.tsx
index 82864fd812..4031380eba 100644
--- a/pages/button-dropdown/disabled-reason.page.tsx
+++ b/pages/button-dropdown/disabled-reason.page.tsx
@@ -133,11 +133,10 @@ export const selectableGroupItems: ButtonDropdownProps.Items = [
{ text: 'Action', id: 'action', disabled: false },
];
-export default function DescriptionPage() {
+export function DisabledReasonDemo() {
const [isRightAligned, setIsRightAligned] = useState(false);
return (
<>
-
Descriptions in ButtonDropdown