Components
UserButton
Avatar + menu for signed-in users, mirrors Clerk's <UserButton/>.
<UserButton />
A floating avatar that opens a menu with the user's profile, switch-organization action, and sign-out. Suitable for app headers where you need auth surface in one component.
Import
Usage
import { UserButton }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
afterSignOutUrl | string | / | URL to redirect to after sign-out |
showName | boolean | false | Show first name next to avatar |
showOrganizationSwitcher | boolean | true | Include org switcher in menu when user has multiple orgs |
customMenuItems | Array<{ label; icon?; onClick }> | [] | Extra menu items above sign-out |
appearance | { avatarSize?: number; menuWidth?: number } | { avatarSize: 32 } | Visual overrides |
Custom menu items
<UserButton
Accessibility
- Menu opens on
Enter/Space; closes onEscape. - Avatar has
aria-labelwith user's display name. - Focus trap inside menu while open.