Skip to main content

​
UserButton

Displays a user avatar and name. When clicked, opens a dropdown menu with account management options including profile management and sign-out. 
import { UserButton } from "@wacht/react-router";

export default function Navbar() {
  return (
    <header>
      <h1>My App</h1>
      <UserButton />
    </header>
  );
}

​
Avatar Only

<UserButton showName={false} />
The dropdown menu includes user avatar, name, email, manage account option, and sign out. If multi-session support is enabled, it shows all signed-in accounts with options to switch between them or sign out individually.

​
Params

​
showName
boolean
default:"true"
Whether to display the user’s name next to the avatar.