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="/docs/components/slot" onClick={(ev) => ev.preventDefault()}>
      Slot
    </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.

Slot

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="/docs/components/slot">Slot</a>
  </Button>
)

Similar Components

For is a component used to loop over an array and render a component for each item.

Format is used to format dates, numbers, and bytes according to a specific locale.

Portal is a component that renders elements outside of the current DOM hierarchy.

ClientOnly is a component that renders its children only on the client side.

Show is a component that shows or hides its children based on a condition.