Slot

Slot is a component that merges its props onto its immediate child.

const Button = ({ asChild, ...props }) => {
  const Component = asChild ? Slot : "button"
  return <Component {...props} />
}

return (
  <Button
    asChild
    onClick={(ev) => {
      if (!ev.defaultPrevented) {
        console.log("Not logged because default is prevented.")
      }
    }}
  >
    <a href="/about" onClick={(ev) => ev.preventDefault()}>
      About
    </a>
  </Button>
)

Usage

import { Slot, Slottable } from "@yamada-ui/react"

import { Slot, Slottable } from "@/components/ui"

import { Slot, Slottable } from "@workspaces/ui"

<Slot>
  <Slottable />
</Slot>

Multiple Children

Slot only accepts a single child element. If you want to accept multiple children, use Slottable.

About

const Button = ({ asChild, children, endIcon, startIcon, ...props }) => {
  const Component = asChild ? Slot : "button"

  return (
    <Component {...props}>
      {startIcon}
      <Slottable>{children}</Slottable>
      {endIcon}
    </Component>
  )
}

return (
  <Button asChild>
    <a href="/about">About</a>
  </Button>
)