Clerk logo

Clerk Docs

Ctrl + K
Go to

<UserButton />

A component that allows users to manage their account, switch accounts, or sign out


The <UserButton/> component is used to render the familiar user button UI popularized by Google. Learn more about the <UserButton/> component, what it is, and how it is used by reading our User Button component guide.

Embedding a <UserButton /> component




Controls the overall look and feel


Controls if the user name is displayed next to the user image button.


The full URL or path to navigate to when the "Add another account" button is clicked.

userProfileMode"modal" | "navigation"

Controls whether clicking the "Manage your account" button will cause the UserProfile component to open as a modal, or if the browser will navigate to the userProfileUrl where UserProfile is mounted as a page.


The full URL or path leading to the user management interface.


The full URL or path to navigate to after a signing out from all accounts (applies to both single-session and multi-session apps)


The full URL or path to navigate to after a signing out from currently active account (multisession apps).


Full URL or path to navigate to after a successful account change (multi-session apps).


Controls whether the <UserButton/> should open by default during the first render.

Custom Styling

The <UserButton/> component can be highly customized through the appearance prop and can be styled using CSS Modules, Tailwind, inline CSS objects, or global CSS.

Customizing User Profile Modal

By leveraging the appearance prop above, it's possible to customize the appearance of the <UserProfile/> component that is presented by clicking the <UserButton/>. Below is a simple example of how that can be achieved:



The <UserButton/> component can be localized using the localization prop. This allows you to customize the language used within the <UserButton/> component.

Was this helpful?

Clerk © 2022