# WithElementRef Documentation

A type helper to enable the `ref` prop on a component.

This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue.

The `WithElementRef` type helper is a convenience type that enables you to follow the same [`ref`](/docs/ref) prop pattern as used by Bits UI components when crafting your own.

```ts
type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
```

This type helper is used internally by Bits UI components to enable the `ref` prop on a component.

## Usage Example

CustomButton.svelte

```svelte
<script lang="ts">
 import type { WithElementRef } from "bits-ui";
 type Props = WithElementRef<
  {
   yourPropA: string;
   yourPropB: number;
  },
  HTMLButtonElement
 >;
 let { yourPropA, yourPropB, ref = $bindable(null) }: Props = $props();
</script>
<button bind:this={ref}>
</button>
```