diff --git a/components/callouts.mdx b/components/callouts.mdx
index ba77c67ce..9369f888e 100644
--- a/components/callouts.mdx
+++ b/components/callouts.mdx
@@ -4,7 +4,7 @@ description: 'Use callouts to add eye-catching context to your content'
 icon: 'info'
 ---
 
-Callouts can be styled as a Note, Warning, Info, Tip, or Check:
+Callouts can be styled as a Note, Warning, Info, Tip, Check, Danger, or create your own callout:
 
 <Note>This adds a note in the content</Note>
 
@@ -38,14 +38,12 @@ Callouts can be styled as a Note, Warning, Info, Tip, or Check:
 
 <Danger>This is a danger callout</Danger>
 
-```jsx
+```mdx
 <Danger>This is a danger callout</Danger>
 ```
 
-<RequestExample>
+<Callout icon="key" color="#FFC107" iconType="regular"> This is a custom callout</Callout>
 
-```mdx Callout Example
-<Note>This adds a note in the content</Note>
+```mdx
+<Callout icon="key" color="#FFC107" iconType="regular">This is a custom callout</Callout>
 ```
-
-</RequestExample>
diff --git a/components/tooltips.mdx b/components/tooltips.mdx
index 0f3056845..675436926 100644
--- a/components/tooltips.mdx
+++ b/components/tooltips.mdx
@@ -6,12 +6,12 @@ icon: 'message-square'
 
 Tooltips are a way to show a definition when you hover over text.
 
-<Tooltip tip="This is a tooltip!">Hover over me</Tooltip> and see a tooltip in action
+<Tooltip tip="This is a tooltip!" cta="Learn more about changelogs" href="/components/update">Hover over me</Tooltip> and see a tooltip in action
 
 <RequestExample>
 
-```mdx Tooltip Example
-<Tooltip tip="This is a tooltip!">Hover over me</Tooltip>
+```mdx Tooltip Example wrap
+<Tooltip tip="This is a tooltip!" cta="Learn more about changelogs" href="/components/update">Hover over me</Tooltip>
 ```
 
 </RequestExample>