Add custom items and links to the <UserButton />
component
The <UserButton />
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>
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.
Props
<UserButton.Action />
accepts the following props:
- Name
label
- Type
string
- Description
The name that will be displayed in the menu of the user button.
- Name
labelIcon
- Type
React.ReactElement
- Description
An icon displayed next to the label in the menu.
- Name
open?
- Type
string
- Description
The path segment that will be used to open user profile modal to a specific page.
- Name
onClick?
- Type
void
- Description
A function to be called when the menu item is clicked.
Example
The following example demonstrates how to add an action to the <UserButton />
component.
The following example demonstrates how to add an action, as well as a custom page, to the <UserButton />
component.
<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.
Props
<UserButton.Link />
accept the following props, all of which are required:
- Name
label
- Type
string
- Description
The name that will be displayed in the menu of the user button.
- Name
labelIcon
- Type
React.ReactElement
- Description
An icon displayed next to the label in the menu.
- Name
href
- Type
string
- Description
The path segment that will be used to navigate to the custom page.
Example
The following example demonstrates how to add a link to the <UserButton />
component.
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:
With the above example, the <UserButton />
menu items will be in the following order:
- Sign out
- Create organization
- Manage account
Conditionally render menu items
To conditionally render menu items based on a user's role or permissions, you can use the has()
helper function:
With the above example, the "Create organization" menu item will only render if the current user has the org:app:admin
permission.
Feedback
Last updated on