# Slot
> Abstract component that merges its props onto its immediate child.

## Import

```js
import { Slot } from '@gemini-suite/vera-react';
```

## Examples

### Basic

Internally, `Slot` will `cloneElement(children)` with merging its props onto child.

```jsx
<Slot
  onClick={() => {
    console.log('box clicked');
  }}
>
  <Box css={{ cursor: 'pointer' }}>{'Child with merged props'}</Box>
</Slot>
```

### Slotted Button

```jsx
<Button variant="strong" as={Slot}>
  <Box as="a" href="#">
    {'Click me'}
  </Box>
</Button>
```

### Deep composition

`Slot` can be useful when you need to compose multiple components together:

```jsx
<Dialog.Root>
  <Dialog.Trigger as={Slot}>
    <Link as="button">{'Dialog trigger with a link appearance'}</Link>
  </Dialog.Trigger>
  <Dialog.Box padding="spacingM">
    {'Dialog content'}
    <Box marginTop="spacingM">
      <Dialog.Close as={Button} variant="outline">
        {'Close'}
      </Dialog.Close>
    </Box>
  </Dialog.Box>
</Dialog.Root>
```