Account menu
Place it in a signed-in application's header so users can access account settings and sign out.
Clerk · Component
UserButton
UserButton renders an account menu for signed-in users, including account management and sign-out. With multi-session enabled, it also supports switching between accounts.
How it works
UserButton renders a familiar account control for signed-in users. Selecting it opens a menu for account management and sign-out; with multi-session enabled, users can also switch between accounts. The account-management view can be configured through userProfileProps.
Syntax
<UserButton />Returns
Renders a user button component; no documented return value is specified.
Key points
- UserButton provides a recognizable avatar-based account control for an application header or similar signed-in area.
- Opening the control gives users both account-management and sign-out actions.
- The menu's account-management action launches Clerk's UserProfile experience.
- When multi-session is enabled, users can keep multiple accounts available and switch between them immediately.
- The menu can be extended with application-specific actions and navigation links.
Common mistakes
- All component properties are optional, so configure only the behavior or appearance your application needs.
- The account-management interface is opened from the menu's Manage account action rather than directly by rendering UserButton.
Example: Basic UserButton
import { UserButton } from '@clerk/nextjs'
export default function Header() {
return (
<header>
<UserButton />
</header>
)
}Render this component in a signed-in area to provide account management and sign-out controls.
When to use it
Account switching
Enable multi-session to let users move between multiple signed-in accounts.
Custom menu extensions
Add product-specific commands or navigation destinations to the account menu.
Interview questions
QWhat does UserButton provide?
UserButton is a user-facing account menu. Selecting it exposes account-management and sign-out actions, and it can also support instant account switching when multi-session is enabled.
Follow-up: How would you configure the account-management experience? Pass configuration through the userProfileProps prop.
QHow is the profile view configured?
The component opens UserProfile when the user chooses Manage account. The userProfileProps prop is the configuration point for that UserProfile experience.
Follow-up: What happens if the application needs a different profile presentation? Configure the profile behavior through userProfileProps rather than changing the button's core role.
QWhat does multi-session add?
With multi-session enabled, UserButton lets a user sign into multiple accounts and switch between them without a full page reload. This makes it suitable for applications where users operate more than one account.
Follow-up: What prerequisite controls whether switching is available? Multi-session must be enabled for the account-switching behavior described by the documentation.
Related
UserProfileuserProfilePropsmulti-sessioncustom actionscustom links