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: