Button inside a trigger without asChild

shadcn/nested-triggererrorreactaccessibility

Why it matters

Radix triggers render a <button>: a button inside it is invalid HTML, a hydration error and a double tab stop.

Fix

Add asChild to the trigger so it merges into the child.

Credit

  • From Radix UI

    The asChild prop merges a primitive's behavior into its single child instead of rendering an extra element.

References