diff --git a/docs/customization/user-button.mdx b/docs/customization/user-button.mdx index 14768b681a..8eaadd2686 100644 --- a/docs/customization/user-button.mdx +++ b/docs/customization/user-button.mdx @@ -318,7 +318,6 @@ The following example demonstrates how to add a link to the `` com - ### JavaScript example To add custom menu items to the `` component using the [JavaScript SDK](/docs/references/javascript/overview), you can pass the `customMenuItems` property to the `mountUserButton` method, as shown in the following example: @@ -340,13 +339,12 @@ To add custom menu items to the `` component using the [JavaScript clerk.mountUserButton(userButtonDiv, { customMenuItems: [ { - label: "User page", - href: "/user", + label: 'User page', + href: '/user', mountIcon: (el) => { - el.innerHTML = "👤"; - }, - unmountIcon: (el) => { + el.innerHTML = '👤' }, + unmountIcon: (el) => {}, }, ], }) @@ -375,13 +373,12 @@ To add custom menu items to the `` component using the [JavaScript Clerk.mountUserButton(userButtonDiv, { customMenuItems: [ { - label: "User page", - href: "/user", + label: 'User page', + href: '/user', mountIcon: (el) => { - el.innerHTML = "👤"; - }, - unmountIcon: (el) => { + el.innerHTML = '👤' }, + unmountIcon: (el) => {}, }, ], }) @@ -390,7 +387,6 @@ To add custom menu items to the `` component using the [JavaScript ``` - ## Reorder default items The `` 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: