Components

<UserButton/>

The signed-in avatar menu. One click opens profile, active devices, organisation switching and sign-out, all backed by the live session.

<UserButton/>renders the current actor’s avatar and a menu for everything they manage about themselves: their profile and security settings, the devices and sessions currently signed in, an entry point into organisation switching, and sign-out. Drop it in your header and it stays in sync with the session automatically.

The component only renders when an actor is signed in, so it is safe to place unconditionally. Pair it with <SignedIn> if you want explicit control over the signed-out state.

Usage

Import it from @orthid/react and place it anywhere inside your provider, typically the top-right of your app shell.

components/AppHeader.tsx

import { UserButton } from "@orthid/react";

export function AppHeader() {
  return (
    <header className="app-header">
      <Logo />
      <nav>{/* ... */}</nav>
      <UserButton afterSignOutUrl="/" />
    </header>
  );
}

What the menu contains

The default menu gives the actor:

Profile - name, email, passkeys, MFA and connected accounts.
Active devices - every signed-in session, with the ability to revoke any of them remotely.
Organisation switching - an entry into the same flow as <OrgSwitcher/>, so the actor can move between organisations without leaving the menu.
Sign out - ends the current session and redirects to afterSignOutUrl.

Show the name

By default the button shows only the avatar. Set showNameto render the actor’s name alongside it, which reads better in a wide desktop header.

Show name

<UserButton showName afterSignOutUrl="/" />

Custom menu items

Add your own actions and links to the menu with menuItems. Each item can navigate to a route or run a handler, so you can surface app-specific destinations such as billing or support next to the built-in entries.

Custom items

<UserButton
  afterSignOutUrl="/"
  menuItems={[
    { label: "Billing", href: "/settings/billing", icon: "card" },
    { label: "Contact support", onClick: () => openSupportWidget() },
  ]}
/>

Theming

Like the rest of the component kit, <UserButton/> takes an appearance prop with design tokens and per-element overrides so the avatar and menu match your product.

Theming

<UserButton
  appearance={{
    tokens: { colorPrimary: "#004a99", borderRadius: "12px" },
    elements: { avatarBox: "ring-2 ring-slate-200" },
  }}
/>

Devices are sovereign too

Active devices and revocations are scoped to the actor’s region. Revoking a session here invalidates the token at the source, so it stops working on the next request, not on the next page load.

Props

Prop	Type	Default	Description
`appearance`	`AppearanceConfig`	-	Theme the avatar and menu with design tokens and per-element class overrides.
`showName`	`boolean`	false	Render the actor's name next to the avatar instead of the avatar alone.
`afterSignOutUrl`	`string`	"/"	URL to redirect to after the actor signs out. Must be allowlisted for the tenant.
`menuItems`	`MenuItem[]`	-	Extra links or actions appended to the menu. Each item takes a label plus an href or onClick, and an optional icon.

Next steps

<OrgSwitcher/> - the standalone organisation switcher reached from the menu.