Next.js Discord

Discord Forum

asChild

Unanswered
Blue Picardy Spaniel posted this in #help-forum
Open in Discord
Blue Picardy SpanielOP
What does asChild do? For example, here's my code:
<Button asChild className="w-full">
   <Link href={`/dashboard/${guild.id}`}>
      Manage
   </Link>
</Button>

The link won't work without asChild being set in the Button.

3 Replies

@Blue Picardy Spaniel What does `asChild` do? For example, here's my code: ts <Button asChild className="w-full"> <Link href={`/dashboard/${guild.id}`}> Manage </Link> </Button> The link won't work without `asChild` being set in the `Button`.
Knopper gall
I haven't really dove too deep into the inner workings of shadcn/ui, but essentially you're omitting the interactivity behaviour of the button, to allow custom behaviour (such as Link)

Otherwise you'd have two events firing simultaneously when you click the button.

Think of it as replacing a <button onclick=...> with <button>
Blue Picardy SpanielOP
ahh ok ty
Singapura
asChild uses basicly a <Slot> component from radix ui, see: https://www.radix-ui.com/primitives/docs/utilities/slot.
Merges its props onto its immediate child.
Your<Link> will look like a button, but behaves like a <Link>