Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix DevTools Badge/Button Should Have a "Part" Attribute (for Styling) [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#87288•Fetched 2026-04-08 02:07:22
View on GitHub
Comments
1
Participants
2
Timeline
6
Reactions
0
Author
machineghostmachineghost
Participants
github-actions[bot]github-actions[bot]machineghostmachineghost
Timeline (top)
labeled ×2closed ×1commented ×1issue_type_added ×1

Code Example

nextjs-portal::part(devToolsBadge) {
  margin-left: 35px;
}

---

All of this is completely irrelevant to the issue, but ...Operating System:
  Platform: linux
  Arch: x64
  Version: #37~24.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Nov 20 10:25:38 UTC 2
  Available memory (MB): 31794
  Available CPU cores: 16
Binaries:
  Node: 25.2.0
  npm: 11.6.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.2.6 // An outdated version detected (latest is 16.0.10), upgrade is highly recommended!
  eslint-config-next: 15.2.3
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
Next.js Config:
  output: N/A
 ⚠ An outdated version detected (latest is 16.0.10), upgrade is highly recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/vercel/next.js/tree/canary/examples/reproduction-template (ANY Next.js instance demonstrates this issue)

To Reproduce

  1. Start the application in development mode.
  2. The Next.js devtools badge/button appears
  3. It can be positioned to exactly 4 places ... but what if you don't want it in one of those places
  4. (eg. what if you want it close to the default place, in the lower left, but you just want to move it a few px over?)

Current vs. Expected behavior

Surely the Next.js devs don't want to force anyone to have the devTools badge/button in an inconvenient place ... but (I'd imagine) you don't want to provide a million config options to let people positin it exactly.

Solution: Add a single HTML attribute (eg. part="devToolsBadge"), and then anyone can style the button any way they want with a single CSS rule in their global CSS:

nextjs-portal::part(devToolsBadge) {
  margin-left: 35px;
}

Provide environment information

All of this is completely irrelevant to the issue, but ...Operating System:
  Platform: linux
  Arch: x64
  Version: #37~24.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Nov 20 10:25:38 UTC 2
  Available memory (MB): 31794
  Available CPU cores: 16
Binaries:
  Node: 25.2.0
  npm: 11.6.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.2.6 // An outdated version detected (latest is 16.0.10), upgrade is highly recommended!
  eslint-config-next: 15.2.3
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
Next.js Config:
  output: N/A
 ⚠ An outdated version detected (latest is 16.0.10), upgrade is highly recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

Instrumentation

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

extent analysis

TL;DR

Add a custom CSS rule using the nextjs-portal::part(devToolsBadge) selector to style the devTools badge/button.

Guidance

  • Identify the desired position for the devTools badge/button and calculate the required margin or padding.
  • Add a custom CSS rule in the global CSS file, targeting the nextjs-portal::part(devToolsBadge) selector, to apply the desired styling.
  • Consider upgrading to the latest version of Next.js (16.0.10) as the current version (15.2.6) is outdated.
  • Verify the fix by checking the position of the devTools badge/button after applying the custom CSS rule.

Example

nextjs-portal::part(devToolsBadge) {
  margin-left: 35px;
}

Notes

The provided solution assumes that the nextjs-portal::part(devToolsBadge) selector is supported in the current version of Next.js. Upgrading to the latest version may provide additional features or fixes.

Recommendation

Apply workaround: Add a custom CSS rule to style the devTools badge/button, as upgrading to the latest version may not provide an immediate solution to the specific issue of customizing the badge's position.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#dependency conflict#environment setup#docker error#permission error#memory optimization

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - 💡(How to fix) Fix DevTools Badge/Button Should Have a "Part" Attribute (for Styling) [1 comments, 2 participants]