<UserButton/>

import { UserButton } from '@auth/clerk'

User profile button that displays the user’s avatar and provides a dropdown menu (web) or modal (native) with account management options.

Works on both web and React Native (Expo) platforms, but with a smaller API surface / config on Mobile.

Usage in Next.js

In Next.js, the UserButton component renders the exact same Clerk UI component from @clerk/nextjs:

• https://clerk.com/docs/nextjs/reference/components/user/user-button

There are no limitations so anything in the Clerk UserButton docs should work on web.

Usage in Expo apps

In Expo, the UserButton trigger stays the same, but instead of a dropdown menu, it opens a modal with a more limited set of account options.

You can, however, still add custom menu items with custom icons, links or actions like you could with the web version:

• <UserButton.MenuItems> as a wrapper for custom menu items inside the modal.
• <UserButton.Link> within that to add custom links / actions.

<UserButton>
    <UserButton.MenuItems>
        <UserButton.Link
            href="/dashboard"
            label='Dashboard'
            labelIcon={(
                <Icon
                    name="ArrowRightFilled"
                    size={16}
                />
            )}
        />
        <UserButton.Link
            href="/onboarding"
            label='Setup & Onboarding'
            labelIcon={(
                <Icon
                    name="ForkIcon"
                    size={16}
                />
            )}
        />
    </UserButton.MenuItems>
</UserButton>