Hydration warnings in development when visiting the dashboard application

[unrenamed]

Preliminary Checks

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

• I have searched for existing issues: https://github.com/unkeyed/unkey/issues

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

Reproduction / Replay Link (Optional)

No response

Issue Summary

The hydration error occurs because placing a <button> component as a descendant of another <button> violates HTML specifications. This can lead to unpredictable behavior during client-side rendering when the DOM structure expected on the client doesn't match the one rendered on the server.

Why it doesn't show in production?
In production, Next.js suppresses some warnings to improve performance, so you may not see the same error message, but the underlying issue still exists.

Is it critical?
Not crucial, but it's worth fixing, especially for avoiding potential rendering bugs. While it might not immediately break the app, unexpected behavior could surface across different browsers or when additional interactivity is introduced. Nesting interactive elements like buttons within each other can also confuse assistive technologies (e.g. automated UI tests).

Steps to Reproduce

1. Visit any page of the dashboard app in development
2. Open Console tab in DevTools
3. See the following warnings:

In HTML, <button> cannot be a descendant of <button>. This will cause a hydration error.

Expected behavior

There is no hydration warnings in a DevTools console in development.

Other information

PR where the bug was found: #2218

Screenshots

Version info

- OS:
- Node:
- npm:

[linear]

ENG-1395 Hydration warnings in development when visiting the dashboard application

[chronark]

/award 150

[oss-gg]

Awarding unrenamed: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/unrenamed

[unrenamed]

/assign

[oss-gg]

Assigned to @unrenamed! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[oss-gg]

@unrenamed, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.