Clerk logo

Clerk Docs

Ctrl + K
Go to

<UserButton />

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


Originally popularized by Google, users have come to expect that little photo of themselves in the top-right of the page – it’s the access point to manage their account, switch accounts, or sign out.

The <UserButton/> component is used to render this familiar user button UI. It renders a clickable user avatar - when clicked, the full UI opens as a popup.

<UserButton /> expanded to show menu

Clerk is the only provider with multi-session support, allowing users to sign into multiple accounts at once and switch between them. For multisession apps, the <UserButton/> automatically supports instant account switching, without the need of a full page reload. For more information, you can check out the Multi-session applications guide.

Control the look and feel of the <UserButton/> component and match it to your application brand using the appearance prop.


Make sure you've followed the quickstart guide for Clerk Next.js or Clerk React before running the snippets below.

Mounting in your app

Once you set up your desired authentication options and have signed in as a user, you can render the <UserButton/> in your app. The default rendering is simple but powerful enough to cover most use-cases. The theme configuration (look and feel) can be completely customized using the appearance prop.

In this example, <UserButton/> is mounted inside a header component, which is a common pattern on many websites and applications. When the user is signed in, they will see their avatar and be able to open the popup menu. If they are signed out, they will see the <SignInButton/>.


Redirect to custom profile

By default, clicking Manage account in the <UserButton/> popup menu will open the User Profile as a modal.

You can change this behavior to redirect to your custom user profile page by doing the following:

  1. Mounting <UserProfile/> in your app
  2. Setting the userProfileMode prop to navigation (the default is modal)
  3. Setting the userProfileUrl prop to the full URL of the user profile page

If userProfileMode is navigation and userProfileUrl is not provided, clicking Manage account will redirect to the Clerk-hosted user account page.



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 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 signing out from the 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.


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:


Example Customization:


Was this helpful?

Clerk © 2022