docs review; copy updates

docs/customization/user-button.mdx

@@ -5,21 +5,16 @@ description: Learn how to add custom items and include external links within the
 
 The [`<UserButton />`](/docs/components/user/user-button) component supports _custom_ menu items, allowing the incorporation of app-specific settings or additional functionality.
 
-To add a custom menu item to the `<UserButton />` component, use the `<UserButton.MenuItems />` component.
-
 There are two types of custom menu items available:
 
-- `<UserButton.Action>` - A menu item that triggers an action when clicked.
-- `<UserButton.Link>` - A menu item that navigates to a page when clicked.
+- [`<UserButton.Action>`](#user-button-action) - A menu item that triggers an action when clicked.
+- [`<UserButton.Link>`](#user-button-link) - A menu item that navigates to a page when clicked.
 
-> [!IMPORTANT]
-> If your app is rendered with [React Server Components](https://react.dev/reference/rsc/server-components) by default, you'll need to add the [`use client` directive](https://react.dev/reference/rsc/use-client) when using `<UserButton />`.
+You can also [reorder default items](#reorder-default-items) and [conditionally render menu items](#conditionally-render-menu-items).
 
 ## `<UserButton.Action>`
 
-Custom actions can be rendered inside the `<UserButton />` component using the `<UserButton.Action />` component. This component is useful for adding actions like opening a chat or triggering a modal.
-
-The `<UserButton />` component must be wrapped in a `<UserButton.MenuItems />` component to render the custom action.
+`<UserButton.Action />` allows you to add actions to the `<UserButton />` component, like opening a chat or triggering a modal.
 
 ### Props
 
@@ -53,9 +48,11 @@ The `<UserButton />` component must be wrapped in a `<UserButton.MenuItems />` c
   A function to be called when the menu item is clicked.
 </Properties>
 
-### Example
+### Examples
 
-The following example demonstrates how to add an action to the `<UserButton />` component.
+#### Add an action
+
+The following example adds an "Open chat" action to the `<UserButton />` component. When a user selects the `<UserButton />`, there will be an "Open chat" menu item.
 
 <Tabs items={["Next.js", "Astro", "JavaScript", "Vue"]}>
   <Tab>
@@ -202,7 +199,9 @@ The following example demonstrates how to add an action to the `<UserButton />`
   </Tab>
 </Tabs>
 
-The following example demonstrates how to add an action, as well as a [custom page](/docs/customization/user-profile), to the `<UserButton />` component.
+#### Add an action and a custom page
+
+The following example adds an "Open chat" action to the `<UserButton />` component, as well as a [custom page](/docs/customization/user-profile) titled "Help". When a user selects the `<UserButton />`, there will be "Open chat" and "Help" menu items.
 
 <Tabs items={["Next.js", "Astro", "Vue"]}>
   <Tab>
@@ -323,9 +322,7 @@ The following example demonstrates how to add an action, as well as a [custom pa
 
 ## `<UserButton.Link>`
 
-Custom links can be rendered inside the `<UserButton />` component using the `<UserButton.Link />` component. This component is useful for adding links to custom pages or external URLs.
-
-The `<UserButton />` component must be wrapped in a `<UserButton.MenuItems />` component to render the custom link.
+`<UserButton.Link />` allows you to add links to the `<UserButton />` component, like custom pages or external URLs.
 
 ### Props
 
@@ -354,7 +351,7 @@ The `<UserButton />` component must be wrapped in a `<UserButton.MenuItems />` c
 
 ### Example
 
-The following example demonstrates how to add a link to the `<UserButton />` component.
+The following example adds a "Create organization" link to the `<UserButton />` component. When a user selects the `<UserButton />`, there will be a "Create organization" menu item.
 
 <Tabs items={["Next.js", "Astro", "JavaScript", "Vue"]}>
   <Tab>
@@ -472,7 +469,9 @@ The following example demonstrates how to add a link to the `<UserButton />` com
 
 ## Reorder default items
 
-The `<UserButton />` component includes two default menu items: `Manage account` and `Sign out`. You can reorder these default items by setting the `label` prop to `'manageAccount'` or `'signOut'`. This will target the existing default item and allow you to rearrange it, as shown in the following example:
+The `<UserButton />` component includes two default menu items: `Manage account` and `Sign out`, in that order. You can reorder these default items by setting the `label` prop to `'manageAccount'` or `'signOut'`. This will target the existing default item and allow you to rearrange it.
+
+In the following example, the "Sign out" menu item is moved to the top of the menu, a custom "Create organization" link is added as the second menu item, and the "Manage account" menu item is moved to the bottom of the menu.
 
 <Tabs items={["Next.js", "Astro", "Vue"]}>
   <Tab>
@@ -563,15 +562,11 @@ The `<UserButton />` component includes two default menu items: `Manage account`
   </Tab>
 </Tabs>
 
-With the above example, the `<UserButton />` menu items will be in the following order:
-
-1. Sign out
-1. Create organization
-1. Manage account
-
 ## Conditionally render menu items
 
-To conditionally render menu items based on a user's role or custom permissions, you can use the [`has()`](/docs/references/backend/types/auth-object#has) helper function:
+To conditionally render menu items based on a user's role or custom permissions, you can use the [`has()`](/docs/references/backend/types/auth-object#has) helper function.
+
+In the following example, the "Create organization" menu item will only render if the current user has the `org:app:admin` permission.
 
 <Tabs items={["Next.js", "Astro", "Vue"]}>
   <Tab>
@@ -678,5 +673,3 @@ To conditionally render menu items based on a user's role or custom permissions,
     ```
   </Tab>
 </Tabs>
-
-With the above example, the "Create organization" menu item will only render if the current user has the `org:app:admin` permission.