From 0d4136e6442bd26b2643ab83d8ea6e49f59019e8 Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Fri, 31 Jan 2025 07:31:30 -0500
Subject: [PATCH] Add note about overlay (#920)

* add note about overlay

* Update overlay.mdx
---
 content/components/overlay.mdx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/content/components/overlay.mdx b/content/components/overlay.mdx
index d34826a90..232cdca09 100644
--- a/content/components/overlay.mdx
+++ b/content/components/overlay.mdx
@@ -14,7 +14,10 @@ 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, consider <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.