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

# Slot

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

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

## Similar Components

- [For](https://yamada-ui.com/docs/components/for.md): `For` is a component used to loop over an array and render a component for each item.
- [Format](https://yamada-ui.com/docs/components/format.md): `Format` is used to format dates, numbers, and bytes according to a specific locale.
- [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy.
- [ClientOnly](https://yamada-ui.com/docs/components/client-only.md): `ClientOnly` is a component that renders its children only on the client side.
- [Show](https://yamada-ui.com/docs/components/show.md): `Show` is a component that shows or hides its children based on a condition.