`<UserButton />` Component

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;

Name	Type	Description
`node`	`HTMLDivElement`	The `<div>` element used to render in the `<UserButton />` component
`props?`	`UserButtonProps`	The 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;

Name	Type	Description
`node`	`HTMLDivElement`	The container `<div>` element with a rendered `<UserButton />` component instance.

`UserButtonProps`

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.
`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`	`string`	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']}`

Last updated on November 21, 2023