diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/debug/stories/debug.mdx b/src/Umbraco.Web.UI.Client/src/packages/core/debug/stories/debug.mdx
index bc1d5399d0..188a7a3c28 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/debug/stories/debug.mdx
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/debug/stories/debug.mdx
@@ -16,24 +16,24 @@ This can help with the developer experience to quickly see what is available to
 
 ### Usage
 
-The `<umb-debug>` component can be used in two different ways, either as a button or as a dialog. By default it is rendered as a button and the debug information about available contexts is dissplayed inline to where the element is placed.
+The `<umb-debug>` component can be used in two different ways, either as a button or as a dialog. By default it is rendered as a button and the debug information about available contexts is displayed inline to where the `umb-debug` element is placed.
 
 <img src={DebugImage} width="100%" />
 
 ```typescript
 // This will add a Debug button to the UI and once clicked the information about avilable contextes will slide down
-<umb-debug enabled></umb-debug>
+<umb-debug visible></umb-debug>
 ```
 
 #### Dialog
 
-This example uses an additional property/attribute `dialog` which adds a smaller badge to the UI as opposed to a button and will open the information in a small dialog/modal from the right hand side, this may be more useful to use when space is limited in the UI to add a button and pane of information directly to where the element is placed.
+This example uses an additional property/attribute `dialog` which adds a smaller badge to the UI as opposed to a button and will open the information in a dialog/modal on the right hand side, this may be more useful to use when space is limited in the UI to add a button and pane of information directly to where the element is placed.
 
 <img src={DebugDialogImage} width="100%" />
 
 ```typescript
 // This will open the debug information in a small dialog/modal from the right hand side
-<umb-debug enabled dialog></umb-debug>
+<umb-debug visible dialog></umb-debug>
 ```
 
 #### Disable
@@ -41,6 +41,8 @@ This example uses an additional property/attribute `dialog` which adds a smaller
 You may wish to temporarily hide or disable the debug information but return to it later on in the development process.
 
 ```typescript
-// To hide or remove the button ensure you remove the enabled attribute or set the enabled property to false
+// To hide or remove the button ensure you remove the `visible` attribute or set it to false
 <umb-debug></umb-debug>
+
+<umb-debug ?visible=${false}></umb-debug>
 ```