diff --git a/docs/02-app/01-building-your-application/02-data-fetching/02-server-actions-and-mutations.mdx b/docs/02-app/01-building-your-application/02-data-fetching/02-server-actions-and-mutations.mdx
index f62589ed66423..eeeef2f3620d0 100644
--- a/docs/02-app/01-building-your-application/02-data-fetching/02-server-actions-and-mutations.mdx
+++ b/docs/02-app/01-building-your-application/02-data-fetching/02-server-actions-and-mutations.mdx
@@ -917,6 +917,7 @@ export function addItem() {
 Defining a Server Action inside a component creates a [closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) where the action has access to the outer function's scope. For example, the `publish` action has access to the `publishVersion` variable:
 
 ```tsx filename="app/page.tsx" switcher
+'use client'
 export default function Page() {
   const publishVersion = await getLatestVersion();
 
@@ -928,11 +929,12 @@ export default function Page() {
     ...
   }
 
-  return <button action={publish}>Publish</button>;
+  return <button onClick={publish}>Publish</button>;
 }
 ```
 
 ```jsx filename="app/page.js" switcher
+'use client'
 export default function Page() {
   const publishVersion = await getLatestVersion();
 
@@ -944,7 +946,7 @@ export default function Page() {
     ...
   }
 
-  return <button action={publish}>Publish</button>;
+  return <button onClick={publish}>Publish</button>;
 }
 ```