Skip to content

labelIcon of <UserButton.UserProfilePage> not showing if ui is provided in ClerkProvider #8447

Description

@jebibot

Preliminary Checks

Reproduction

https://github.com/jebibot/clerk-repro-1/tree/custom-ui

Publishable key

pk_test_c2FjcmVkLWRvdmUtOC5jbGVyay5hY2NvdW50cy5kZXYk

Description

Steps to reproduce:

import { ClerkProvider } from "@clerk/nextjs";
import { ui } from "@clerk/ui";

<ClerkProvider ui={ui}>
  <CustomUserButton />
</ClerkProvider>
"use client";

import { UserButton } from "@clerk/nextjs";

export default function CustomUserButton() {
  return (
    <UserButton>
      <UserButton.UserProfilePage label="Custom Page" url="custom" labelIcon={<DotIcon />}>
        <CustomPage />
      </UserButton.UserProfilePage>
    </UserButton>
  );
}
  1. Log in
  2. Click Manage Account

Expected behavior:

Image

Actual behavior:

Image

The navbarButtonIcon div is empty.

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (32) x64 AMD Ryzen 9 9950X3D 16-Core Processor          
    Memory: 11.85 GB / 61.52 GB
  Binaries:
    Node: 24.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.13.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.32.1 - C:\Users\y\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 147.0.7727.103
    Edge: Chromium (147.0.3912.72)
    Firefox: 148.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
  npmPackages:
    @clerk/nextjs: ^7.3.0 => 7.3.0 
    @clerk/ui: ^1.7.0 => 1.7.0 
    @tailwindcss/postcss: ^4 => 4.2.4 
    @types/node: ^20 => 20.19.39 
    @types/react: ^19 => 19.2.14 
    @types/react-dom: ^19 => 19.2.3 
    eslint: ^9 => 9.39.4 
    eslint-config-next: 16.2.4 => 16.2.4 
    next: 16.2.4 => 16.2.4 
    react: 19.2.4 => 19.2.4 
    react-dom: 19.2.4 => 19.2.4 
    tailwindcss: ^4 => 4.2.4 
    typescript: ^5 => 5.9.3

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions