Skip to main content

​
Overview

The <UserButton /> component provides a dropdown interface for authenticated users to access their profile, account settings, switch between users, and sign out. It displays the user’s avatar and name, with a dropdown menu containing account management options.

​
Basic Usage

import { UserButton } from '@snipextt/wacht'

function Navbar() {
  return (
    <nav className="navbar">
      <div className="nav-brand">Your App</div>
      <UserButton />
    </nav>
  )
}

​
Props

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

​
What it includes

The component automatically renders based on the authenticated user:

​
User Information Display

  • User Avatar - Profile image or initials if no image uploaded
  • User Name - Full name (first name + last name) when showName is true
  • Online Status - Visual indicator when user is active
  • Manage Account - Opens account settings and profile management
  • Switch Users - Allows switching between multiple user sessions (if enabled)
  • Sign Out - Signs out the current user and redirects to sign-in page