<UserButton />
The <StackUserButton> renders a user button component with optional user information, color mode toggle, and extra menu items.
Component Demo
Interactive Demo
Try out the UserButton component with different props and see the changes in real-time:
Component Options
Whether to display user information (display name and email) or only show the avatar.
Function to be called when the color mode toggle button is clicked. If specified, a color mode toggle button will be shown.
Additional menu items to display in the dropdown.
Live Preview
Component Demo
Code Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
showUserInfooptional | boolean | false | If true, displays user information (display name and email) in the button. |
colorModeToggleoptional | () => void | Promise<void> | undefined | Function to be called when the color mode toggle button is clicked. If specified, a color mode toggle button will be shown. |
extraItemsoptional | Array | — | Additional menu items to display. Each item should have the following properties: |
text | string | — | The text to display for the item. |
icon | React.ReactNode | — | The icon to display for the item. |
onClick | () => void | Promise<void> | — | Function to be called when the item is clicked. |
Example
'use client';
import { UserButton } from '@stackframe/stack';
export default function Page() {
return (
<div>
<h1>User Button</h1>
<UserButton
showUserInfo={true}
colorModeToggle={() => { console.log("color mode toggle clicked") }}
extraItems={[{
text: 'Custom Action',
icon: <CustomIcon />,
onClick: () => console.log('Custom action clicked')
}]}
/>
</div>
);
}