<UserButton />

Renders a user button component with optional user information, color mode toggle, and extra menu items.

Props

• showUserInfo: boolean - Whether to display user information (display name and email) or only show the avatar.
• colorModeToggle: () => void | Promise<void> - Function to be called when the color mode toggle button is clicked. If specified, a color mode toggle button will be shown.
• extraItems: Array<{text: string, icon: React.ReactNode, onClick: Function}> - Additional menu items to display.

Example

1
'use client';
2
import { UserButton } from '@stackframe/stack';
3
4
export default function Page() {
5
  return (
6
    <div>
7
      <h1>User Button</h1>
8
      <UserButton
9
        showUserInfo={true}
10
        colorModeToggle={() => { console.log("color mode toggle clicked") }}
11
        extraItems={[{
12
          text: 'Custom Action',
13
          icon: <CustomIcon />,
14
          onClick: () => console.log('Custom action clicked')
15
        }]}
16
      />
17
    </div>
18
  );
19
}