Skip to main content
The <UrUserButton> component renders a small profile avatar that, when clicked, opens a dropdown menu containing the user’s name, email, and action buttons like “Profile”, “Settings”, and “Logout”. It automatically disappears if the user is not logged in, making it safe to place anywhere in your application layout.

​
Usage

import { UrUserButton } from '@urbackend/react';

export default function Header() {
  return (
    <header>
      <h1>My App</h1>
      
      {/* Places the button in the top right corner by default */}
      <UrUserButton 
        onProfileClick={() => console.log("Navigate to Profile")}
        onSettingsClick={() => console.log("Navigate to Settings")}
      />
    </header>
  );
}

​
Props

PropTypeDefaultDescription
shape'square' | 'circle''square'The visual shape of the avatar button.
position'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'inline''top-right'Positions the button fixed to the screen corners, or 'inline' to fit into standard flex/grid layouts.
onProfileClick() => voidundefinedCallback fired when the “Profile” button in the dropdown is clicked. If undefined, the button is hidden.
onSettingsClick() => voidundefinedCallback fired when the “Settings” button in the dropdown is clicked. If undefined, the button is hidden.
zIndexnumber999The z-index of the fixed container.

​
Logout Behavior

The “Logout” button inside the dropdown is automatically wired up to the SDK. Clicking it will immediately log the user out and clear the session state across the application.