UserButton.Action labelIcon should appear for conditionally rendered actions/links

[aldenquimby]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/aldenquimby/clerk-bug-user-button-label-icon

Publishable key

pk_test_aW1tdW5lLXRlYWwtMjEuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Steps to reproduce:

1. Use UserButton with UserButton.MenuItems and UserButton.Action (or UserButton.Link, they both have the bug)
2. Conditionally render the action, e.g. after some data loads to determine if the action should be available or not

Expected behavior:

• Conditionally rendered custom actions/links work correctly and show icons

Actual behavior:

• Conditionally rendered custom action/links work, but they do not show icons

Example

• From my minimal repro example, wait 5 seconds after UserButton renders, then click it and notice the custom action icon is not there:

• If I do not conditionally render the custom action/link, then the icon appears correctly:

Environment

System:
    OS: macOS 15.4.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 334.59 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.local/state/fnm_multishells/42049_1753880159299/bin/node
    Yarn: 1.22.22 - ~/.local/state/fnm_multishells/42049_1753880159299/bin/yarn
    npm: 10.9.2 - ~/.local/state/fnm_multishells/42049_1753880159299/bin/npm
    pnpm: 10.13.1 - node_modules/.bin/pnpm
  Browsers:
    Brave Browser: 138.1.80.122
    Chrome: 138.0.7204.169
    Safari: 18.4
  npmPackages:
    @clerk/nextjs: 6.22.0 => 6.22.0 
    @tailwindcss/postcss: ^4.1.11 => 4.1.11 
    @types/node: ^24.0.3 => 24.0.3 
    @types/react: ^19.1.8 => 19.1.8 
    @types/react-dom: ^19.1.6 => 19.1.6 
    @types/react-syntax-highlighter: ^15.5.13 => 15.5.13 
    clsx: ^2.1.1 => 2.1.1 
    lucide-react: ^0.534.0 => 0.534.0 
    next: 15.3.4 => 15.3.4 
    pnpm: ^10.13.1 => 10.13.1 
    postcss: ^8.5.6 => 8.5.6 
    prism-react-renderer: ^2.4.1 => 2.4.1 
    react: ^19.1.0 => 19.1.0 
    react-dom: ^19.1.0 => 19.1.0 
    react-syntax-highlighter: ^15.6.1 => 15.6.1 
    tailwindcss: ^4.1.11 => 4.1.11 
    typescript: ^5.8.3 => 5.8.3

[wobsoriano]

Hello! Thanks for reporting this issue. I confirm that the problem exists and have addressed it in this PR: #6443. The fix will be available in the next release.

In the meantime, you can install the snapshot version with the fix using:

npm i https://pkg.pr.new/@clerk/nextjs@6443

Let us know if you have any further questions or run into any issues.

[aldenquimby]

Thank you @wobsoriano ! Appreciate the fast turn aroun