<!-- This file is auto-generated by the docs:generate-viewhelper-docs command. Do not edit directly -->

# ui:detachable

**Reference:** [View Source](https://github.com/jramke/fluid-primitives/tree/main/Classes/ViewHelpers/DetachableViewHelper.php)

Lets a part render outside its root. Add it to the template of the part, and the part takes a `provider` prop with the `id` of a `<component>.provider`:

```html
<ui:detachable />

<button {ui:ref(name: 'trigger')} {ui:attributes()}>
    <f:slot />
</button>
```

```html
<ui:dialog.provider id="cookie-settings" />
<ui:dialog.trigger provider="cookie-settings">Cookie settings</ui:dialog.trigger>
<ui:dialog.root provider="cookie-settings">...</ui:dialog.root>
```

A wrapper built with `ui:useProps` adds its own `<ui:detachable />` to take `provider`.

## Arguments

_None_
