---
title: Slot
description: "`Slot` is a component that merges its props onto its immediate child."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/slot
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-slot--basic
---

```tsx
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

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

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

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

```tsx
<Slot>
  <Slottable />
</Slot>
```

### Multiple Children

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

```tsx
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>
)
```