Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

<UserButton /> component

User Button Example

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

mountUserButton()

Render the <UserButton /> component to an HTML <div> element.

Usage

import Clerk from '@clerk/clerk-js'; import { dark } from "@clerk/themes"; document.querySelector<HTMLDivElement>('#app')!.innerHTML = ` <div id="user-button" ></div> `; const userButtonComponent = document.querySelector<HTMLDivElement>('#user-button')!; const clerk = new Clerk('pk_[publishable_key]'); await clerk.load(); clerk.mountUserButton(userButtonComponent, { appearance: { baseTheme: dark } });
<div id="user-button"></div> <script> const script = document.createElement('script'); script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]'); script.async = true; script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`; script.addEventListener('load', async function () { await window.Clerk.load(); const userButtonComponent = document.querySelector('#user-button'); window.Clerk.mountUserButton(userButtonComponent, { appearance: { baseTheme: dark } }); }); document.body.appendChild(script); </script>

Properties

function mountUserButton(node: HTMLDivElement, props?: UserButtonProps): void;
NameTypeDescription
nodeHTMLDivElement(opens in a new tab)The <div> element used to render in the <UserButton /> component
props?UserButtonPropsThe properties to pass to the <UserButton /> component

unmountUserButton()

Unmount and run cleanup on an existing <UserButton /> component instance.

Usage

import Clerk from '@clerk/clerk-js'; document.querySelector<HTMLDivElement>('#app')!.innerHTML = ` <div id="user-button" ></div> ` const userButtonComponent = document.querySelector<HTMLDivElement>('#user-button')!; const clerk = new Clerk('pk_[publishable_key]'); await clerk.load(); clerk.mountUserButton(userButtonComponent); // ... clerk.unmountUserButton(userButtonComponent);
<div id="user-button"></div> <script> const script = document.createElement('script'); script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]'); script.async = true; script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`; script.addEventListener('load', async function () { await window.Clerk.load(); const userButtonComponent = document.querySelector('#user-button'); window.Clerk.mountUserButton(userButtonComponent); // ... window.Clerk.unmountUserButton(userButtonComponent); }); document.body.appendChild(script); </script>

Properties

function unmountUserButton(node: HTMLDivElement): void;
NameTypeDescription
nodeHTMLDivElement(opens in a new tab)The container <div> element with a rendered <UserButton /> component instance.

UserButtonProps

All props below are optional.

NameTypeDescription
appearanceAppearance | undefinedOptional object to style your components. Will only affect Clerk Components and not Account Portal pages.
signInUrlstringThe 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.
userProfileUrlstringThe full URL or path leading to the user management interface.
afterSignOutUrlstringThe full URL or path to navigate to after a signing out from all accounts (applies to both single-session and multi-session apps).
afterMultiSessionSingleSignOutUrlstringThe full URL or path to navigate to after a signing out from currently active account (multisession apps).
afterSwitchSessionUrlstringFull URL or path to navigate to after a successful account change (multi-session apps).
defaultOpenstringControls whether the <UserButton/> should open by default during the first render.
userProfilePropsobjectSpecify options for the underlying <UserProfile /> component.
e.g. additionalOAuthScopes: {google: ['foo', 'bar'], github: ['qux']}

What did you think of this content?

Clerk © 2024