Skip to content

docs(drawer): add asChild on DrawerClose in Usage example#10403

Closed
MukundaKatta wants to merge 1 commit intoshadcn-ui:mainfrom
MukundaKatta:docs/drawer-close-aschild
Closed

docs(drawer): add asChild on DrawerClose in Usage example#10403
MukundaKatta wants to merge 1 commit intoshadcn-ui:mainfrom
MukundaKatta:docs/drawer-close-aschild

Conversation

@MukundaKatta
Copy link
Copy Markdown

Summary

The Drawer Usage example wraps a <Button> inside a <DrawerClose> without asChild:

<DrawerClose>
  <Button variant="outline">Cancel</Button>
</DrawerClose>

Because DrawerClose renders a <button> by default and Button also renders a <button>, copy-pasting the example produces a nested <button><button> tree and React raises a hydration error:

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

Adding asChild delegates rendering to the child so only one <button> ends up in the DOM — matching the pattern already used by DialogClose, AlertDialogCancel, and other Radix primitives elsewhere in the docs.

Fix applied to both the Radix and Base variants of the drawer doc:

  • apps/v4/content/docs/components/radix/drawer.mdx
  • apps/v4/content/docs/components/base/drawer.mdx

Fixes #6205

Test plan

  • Both doc files updated identically
  • Pattern matches asChild usage already present in sibling close-button docs
  • Docs site renders the updated example without hydration warning (not run locally; two-char MDX edit)

The Usage example wraps a `<Button>` inside a `<DrawerClose>`
without `asChild`. Because `DrawerClose` renders a `<button>` by
default and `Button` also renders a `<button>`, copy-pasting the
example produces a nested `<button><button>` tree and React 19
raises a hydration error:

    In HTML, <button> cannot be a descendant of <button>.

Adding `asChild` delegates rendering to the child so only one
`<button>` ends up in the DOM, matching the pattern already used
by `DialogClose`, `AlertDialogCancel`, and other Radix primitives
elsewhere in the docs.

Fix applied to both the Radix and Base variants of the drawer doc.

Fixes shadcn-ui#6205
@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Apr 15, 2026

@MukundaKatta is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@MukundaKatta
Copy link
Copy Markdown
Author

Withdrawing — low-value drive-by change. Apologies for the noise.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug][docs]: Drawer docs usage section typo which leads to nested buttons

1 participant