<UserButton />

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

Overview

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.

Usage

1
import {
2
  ClerkProvider,
3
  SignedIn,
4
  SignedOut,
5
  SignInButton,
6
  UserButton
7
} from "@clerk/nextjs";
8

9
function Header() {
10
  return (
11
    <header
12
      style={{ display: "flex", justifyContent: "space-between", padding: 20 }}
13
    >
14
      <h1>My App</h1>
15
      <SignedIn>
16
        {/* Mount the UserButton component */}
17
        <UserButton />
18
      </SignedIn>
19
      <SignedOut>
20
        {/* Signed out users get sign in button */}
21
        <SignInButton />
22
      </SignedOut>
23
    </header>
24
  );
25
}
26

27
function MyApp({ pageProps }) {
28
  return (
29
    <ClerkProvider {...pageProps}>
30
      <Header />
31
    </ClerkProvider>
32
  );
33
}
34

35
export default MyApp;

1
import {
2
  ClerkProvider,
3
  SignedIn,
4
  SignedOut,
5
  SignInButton,
6
  UserButton
7
} from "@clerk/clerk-react";
8

9
function Header() {
10
  return (
11
    <header
12
      style={{ display: "flex", justifyContent: "space-between", padding: 20 }}
13
    >
14
      <h1>My App</h1>
15
      <SignedIn>
16
        {/* Mount the UserButton component */}
17
        <UserButton />
18
      </SignedIn>
19
      <SignedOut>
20
        {/* Signed out users get sign in button */}
21
        <SignInButton />
22
      </SignedOut>
23
    </header>
24
  );
25
}
26

27
function App() {
28
  return (
29
    <ClerkProvider publishableKey="clerk_pub_key">
30
      <Header />
31
    </ClerkProvider>
32
  );
33
}
34

35
export default App;

1
<html>
2
<body>
3
    <div id="user-button"></div>
4
    
5
    <script>
6
        const el = document.getElementById("user-button");
7
        // Mount the pre-built Clerk UserButton component
8
        // inside an HTMLElement on your page. 
9
        window.Clerk.mountUserButton(el);
10
    </script>
11
</body>
12
</html>

Props

Name	Type	Description
appearance?	Theme	Controls the overall look and feel
showName?	string	Controls if the user name is displayed next to the user image button.
signInUrl?	string	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.
userProfileUrl?	string	The full URL or path leading to the user management interface.
afterSignOutUrl?	string	The full URL or path to navigate to after a signing out from all accounts (applies to both single-session and multi-session apps)
afterMultiSessionSingleSignOutUrl?	string	The full URL or path to navigate to after a signing out from currently active account (multisession apps) .
afterSwitchSessionUrl?	string	Full URL or path to navigate to after a successful account change (multi-session apps).
defaultOpen	boolean	Controls whether the <UserButton/> should open by default during the first render.
userProfileProps?	userProfileProps	Specify options for the underlying <UserProfile /> component. e.g. `<UserButton userProfileProps={{additionalOAuthScopes: {google: ['foo', 'bar'], github: ['qux']}}} />`

Customization

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.