JavaScript `<UserButton />`

This JavaScript reference describes the properties and methods related to Clerk's <UserButton /> component. If you are looking for the React component, see the <UserButton /> documentation.

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

The following methods available on an instance of the Clerk class are used to render and control the <UserButton /> component:

`mountUserButton()`

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


function mountUserButton(node: HTMLDivElement, props?: UserButtonProps): void;

`mountUserButton()` params

Name	Type	Description
`node`	`HTMLDivElement`(opens in a new tab)	The `<div>` element used to render in the `<UserButton />` component
`props?`	`UserButtonProps`	The properties to pass to the `<UserButton />` component

`mountUserButton()` usage

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
document.getElementById("app").innerHTML = `
  <div id="user-button"></div>
`;
 
const userbuttonDiv =
  document.getElementById("user-button");
 
clerk.mountUserButton(userbuttonDiv);

index.html
<!-- Add a <div id="user-button"> element to your HTML -->
<div id="user-button"></div>
 
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    const userbuttonDiv =
      document.getElementById('user-button');
 
    Clerk.mountUserButton(userbuttonDiv);
  });
</script>

`unmountUserButton()`

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


function unmountUserButton(node: HTMLDivElement): void;

`unmountUserButton()` params

Name	Type	Description
`node`	`HTMLDivElement`(opens in a new tab)	The container `<div>` element with a rendered `<UserButton />` component instance.

`unmountUserButton()` usage

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
document.getElementById('app').innerHTML = `
  <div id="user-button"></div>
`
 
const userButtonDiv =
  document.getElementById('user-button');
 
clerk.mountUserButton(userButtonDiv);
 
// ...
 
clerk.unmountUserButton(userButtonDiv);

index.html
<!-- Add a <div id="user-button"> element to your HTML -->
<div id="user-button"></div>
 
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    const userButtonDiv =
      document.getElementById('user-button');
 
    Clerk.mountUserButton(userButtonDiv);
 
    // ...
 
    Clerk.unmountUserButton(userButtonDiv);
  });
</script>

`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.
`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. For example, `{additionalOAuthScopes: {google: ['foo', 'bar'], github: ['qux']}}`.

mountUserButton()

mountUserButton() params

mountUserButton() usage

unmountUserButton()

unmountUserButton() params

unmountUserButton() usage

UserButtonProps