`<UserButton />`

The <UserButton /> component is used to render the familiar user button UI popularized by Google.

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.

Usage

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.

layout.[jsx/tsx]
import {
  ClerkProvider,
  SignedIn,
  SignedOut,
  SignInButton,
  UserButton,
} from "@clerk/nextjs";
 
function Header() {
  return (
    <header style={{ display: "flex", justifyContent: "space-between", padding: 20 }}>
      <h1>My App</h1>
      <SignedIn>
        {/* Mount the UserButton component */}
        <UserButton />
      </SignedIn>
      <SignedOut>
        {/* Signed out users get sign in button */}
        <SignInButton/>
      </SignedOut>
    </header>
  );
}
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <ClerkProvider>
        <Header />
        {children}
      </ClerkProvider>
    </html>
  );
}

userButtonExample.[jsx/tsx]
import {
  ClerkProvider,
  SignedIn,
  SignedOut,
  SignInButton,
  UserButton,
} from "@clerk/nextjs";
 
function Header() {
return (
    <header style={{ display: "flex", justifyContent: "space-between", padding: 20 }}>
      <h1>My App</h1>
      <SignedIn>
        {/* Mount the UserButton component */}
        <UserButton />
      </SignedIn>
      <SignedOut>
        {/* Signed out users get sign in button */}
        <SignInButton/>
      </SignedOut>
    </header>
);
}
 
function MyApp({ pageProps }) {
  return (
    <ClerkProvider {...pageProps}>
      <Header />
    </ClerkProvider>
  );
}
 
export default MyApp;

app.tsx
import {
  ClerkProvider,
  SignedIn,
  SignIn,
  SignUp,
  UserButton,
} from "@clerk/clerk-react";
import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom";
 
const clerk_pub_key = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;
 
function PublicPage() {
    return (
      <>
        <h1>Public page</h1>
        <a href="/protected">Go to protected page</a>
      </>
    );
}
 
function ProtectedPage() {
  return (
      <>
        <h1>Protected page</h1>
        <UserButton />
      </>
    );
}
 
function ClerkProviderWithRoutes() {
  const navigate = useNavigate();
 
  return (
    <ClerkProvider
      publishableKey={clerk_pub_key}
      navigate={(to) => navigate(to)}>
        <Routes>
          <Route path="/" element={<PublicPage />} />
          <Route
          path="/sign-in/*"
          element={<SignIn routing="path" path="/sign-in" />}
          />
          <Route
          path="/sign-up/*"
          element={<SignUp routing="path" path="/sign-up" />}
          />
          <Route
            path="/protected"
            element={
              <SignedIn>
                <ProtectedPage />
              </SignedIn>
            }
          />
        </Routes>
      </ClerkProvider>
    );
}
 
function App() {
  return (
    <BrowserRouter>
      <ClerkProviderWithRoutes />
    </BrowserRouter>
  );
}

router/index.tsx
import {
  UserButton,
} from "@clerk/remix";
import { getAuth } from "@clerk/remix/ssr.server";
import { LoaderFunction, redirect } from "@remix-run/node";
 
export const loader: LoaderFunction = async (args) => {
  const { userId } = await getAuth(args);
  if(!userId){
    return redirect("/sign-in");
  }
  return {};
}
 
export default function Index() {
  return (
    <div>
        <h1>Index route</h1>
        <p>You are signed in!</p>
        <UserButton afterSignOutUrl="/"/>
    </div>
  );
}

Properties

All props below are optional.

Name	Type	Description
`appearance`	`Appearance \| undefined`	Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
`showName`	`boolean`	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. Defaults to: `'modal'`.
`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`	The 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`	`object`	Specify options for the underlying `<UserProfile />` component. e.g. `{additionalOAuthScopes: {google: ['foo', 'bar'], github: ['qux']}}`.

Customization

To learn about how to customize Clerk components, see the customization documentation.