---
title: "<UserButton />"
description: Renders a user button component with optional user information, color mode toggle, and extra menu items.
---

The `<UserButton>` renders a user button component with optional user information, color mode toggle, and extra menu items.

## Props

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `showUserInfo` | `boolean` | `false` | If true, displays user information (display name and email) in the button. |
| `colorModeToggle` | `() => 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. |
| `extraItems` | `Array` | - | Additional menu items to display. See below for item properties. |

### extraItems Properties

| Property | Type | Description |
|----------|------|-------------|
| `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

```tsx
'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>
  );
}
```