From ba855ea81255d2872a99ad0a1bfce699e07f41dc Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Thu, 30 Jan 2025 14:45:28 -0500
Subject: [PATCH] add note about overlay

---
 content/components/overlay.mdx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/content/components/overlay.mdx b/content/components/overlay.mdx
index d34826a90..fef8fef00 100644
--- a/content/components/overlay.mdx
+++ b/content/components/overlay.mdx
@@ -14,7 +14,14 @@ import {AccessibilityLink} from '~/src/components/accessibility-link'
 
 ## Usage
 
-Overlay is an internal component and is intended to be used as a private API, composing other components. It is not intended to be used on its own. 
+<Note variant="danger">
+  <Text sx={{display: 'block', fontWeight: 'bold', mb: 2}}>⚠️ Usage Warning ⚠️</Text>
+  <Text>
+    Overlay is an internal component and is intended to be used as a private API, composing other components. It is not intended to be used on its own. 
+
+    For a ready-to-use overlay-type component, refer to <a href="/components/dialog">Dialog</a>, <a href="/components/selectpanel">Select Panel</a>,  or <a href="/components/dialog">Action Menu</a>.
+  </Text>
+</Note>
 
 The overlay component handles all behaviors needed by overlay UIs as well as the common styles that all overlays should have. Overlay is the internal, or base component for many of our overlay-type components. Overlays use shadows to express elevation.