> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-c54e9cd8.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Control Panel

> Recorder control panel component.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## Overview

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-overview-modes.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=08441e700177863b97a52c134f9aa5c6" alt="" width="1280" height="650" data-path="images/customization/recorder/screen-control-panel-overview-modes.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe>
            <VeltRecorderControlPanelWireframe.FloatingMode />
            <VeltRecorderControlPanelWireframe.ThreadMode />
        </VeltRecorderControlPanelWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-wireframe>
            <velt-recorder-control-panel-floating-mode-wireframe />
            <velt-recorder-control-panel-thread-mode-wireframe />
        </velt-recorder-control-panel-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Floating Mode

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-overview.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=c8883745b7f7a2801182ac5e11f740e7" alt="" width="1280" height="650" data-path="images/customization/recorder/screen-control-panel-floating-mode-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode>
            <VeltRecorderControlPanelWireframe.FloatingMode.Container />
            <VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer />
            <VeltRecorderControlPanelWireframe.FloatingMode.Loading />
            <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar />
        </VeltRecorderControlPanelWireframe.FloatingMode>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-floating-mode-wireframe>
            <velt-recorder-control-panel-floating-mode-container-wireframe />
            <velt-recorder-control-panel-screen-mini-container-wireframe />
            <velt-recorder-control-panel-loading-wireframe />
            <velt-recorder-control-panel-action-bar-wireframe />
        </velt-recorder-control-panel-floating-mode-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Container (Floating Mode)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=64d4471e00ddd91d7517f0168b17509b" alt="" width="1280" height="770" data-path="images/customization/recorder/screen-control-panel-floating-mode-container.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.Container>
            <VeltRecorderControlPanelWireframe.FloatingMode.Video />
            <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton />
            <VeltRecorderControlPanelWireframe.FloatingMode.Paused />
            <VeltRecorderControlPanelWireframe.FloatingMode.Waveform />
        </VeltRecorderControlPanelWireframe.FloatingMode.Container>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-floating-mode-container-wireframe>
            <velt-recorder-control-panel-video-wireframe />
            <velt-recorder-control-panel-floating-mode-waveform-wireframe />
            <velt-recorder-control-panel-collapsed-button-wireframe />
            <velt-recorder-control-panel-paused-wireframe />
        </velt-recorder-control-panel-floating-mode-container-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Video (Floating Mode Container)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-container-video.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=c1224a0de7f7e37e713e1fa866fc1c14" alt="" width="1280" height="534" data-path="images/customization/recorder/screen-control-panel-floating-mode-container-video.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.Video />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-video-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Waveform (Floating Mode Container)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-container-waveform.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=c270793b6a15ed552850c097ee47a64a" alt="" width="1280" height="534" data-path="images/customization/recorder/screen-control-panel-floating-mode-container-waveform.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.Waveform />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-floating-mode-waveform-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### CollapsedButton (Floating Mode Container)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-container-collapse.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=0f65b0c80f42890bdfc4d79d5430b4bc" alt="" width="1280" height="354" data-path="images/customization/recorder/screen-control-panel-floating-mode-container-collapse.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton>
            <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.On />
            <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.Off />
        </VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-collapsed-button-wireframe>
            <velt-recorder-control-panel-collapsed-button-on-wireframe />
            <velt-recorder-control-panel-collapsed-button-off-wireframe />
        </velt-recorder-control-panel-collapsed-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### On (CollapsedButton)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-on.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=1a44a646785f221ec3136d1d90a5e084" alt="" width="1280" height="354" data-path="images/customization/recorder/screen-control-panel-floating-mode-container-collapse-on.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.On />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-collapsed-button-on-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### Off (CollapsedButton)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-off.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=b85c5a10ecb4c8abe452c8b6435b6e1d" alt="" width="1280" height="354" data-path="images/customization/recorder/screen-control-panel-floating-mode-container-collapse-off.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.Off />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-collapsed-button-off-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Paused (Floating Mode Container)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-container-paused.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=5223a031e9019657ce51a92c18aabaad" alt="" width="1280" height="354" data-path="images/customization/recorder/screen-control-panel-floating-mode-container-paused.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.Paused />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-paused-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### ScreenMiniContainer (Floating Mode)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=38727cadfececa8d63b41b9888964b6c" alt="" width="1280" height="298" data-path="images/customization/recorder/mini-screen-control-panel-floating-mode-container.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer>
            <VeltRecorderControlPanelWireframe.FloatingMode.Video />
            <VeltRecorderControlPanelWireframe.FloatingMode.Screen />
        </VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-screen-mini-container-wireframe>
            <velt-recorder-control-panel-video-wireframe />
            <velt-recorder-control-panel-screen-wireframe />
        </velt-recorder-control-panel-screen-mini-container-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Video (Floating Mode ScreenMiniContainer)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=f562edcb72293f20a0b2e6286dbdd2b3" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png" />

<Note>This is the same Video component as used in the Floating Mode Container.</Note>

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.Video />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-video-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Screen (Floating Mode ScreenMiniContainer)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=e2e08c5eee0fae921ce5b3638a5524e6" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.Screen />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-screen-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Loading (Floating Mode)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-loading.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=7db3427b821934864d2f494b2b208262" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-loading.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.Loading />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-loading-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### ActionBar (Floating Mode)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=e4954b6fef4adb8fb92ddccb81366f7b" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar>
            <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.TypeIcon />
            <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Time />
            <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Waveform />
            <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle />
            <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Pip />
            <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Stop />
            <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Clear />
        </VeltRecorderControlPanelWireframe.FloatingMode.ActionBar>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-wireframe>
            <velt-recorder-control-panel-action-bar-type-icon-wireframe />
            <velt-recorder-control-panel-action-bar-time-wireframe />
            <velt-recorder-control-panel-action-bar-waveform-wireframe />
            <velt-recorder-control-panel-action-bar-toggle-wireframe />
            <velt-recorder-control-panel-action-bar-pip-wireframe />
            <velt-recorder-control-panel-action-bar-stop-wireframe />
            <velt-recorder-control-panel-action-bar-clear-wireframe />
        </velt-recorder-control-panel-action-bar-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### TypeIcon (ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-type-icon.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=8b8c8fa30e012ea7530f2483da9dbe59" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-type-icon.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.TypeIcon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-type-icon-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Time (ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-time.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=58927b60961c7bcf164885e1eedba269" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-time.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Time />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-time-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Waveform (ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-waveform.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=b6df7f8d2587394f82da88f00d368d63" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-waveform.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Waveform />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-waveform-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Toggle (ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-toggle.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=c7d66a2e192e8ec3fcf4db2d3d570b3b" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-toggle.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle>
            <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Pause />
            <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Play />
        </VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-toggle-wireframe>
            <velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
            <velt-recorder-control-panel-action-bar-toggle-play-wireframe />
        </velt-recorder-control-panel-action-bar-toggle-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### Pause (Toggle)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=05c250f325bde68c0105dfd3a0a860fc" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Pause />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### Play (Toggle)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=a8ed60f12f74d49a88c4f55bb0be861f" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-toggle-play.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Play />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-toggle-play-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Pip (ActionBar)

Picture-in-Picture button for screen recordings with camera. This allows users to view the recording in a floating window during screen capture.

<Warning>
  Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
</Warning>

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Pip />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-pip-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Stop (ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-stop.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=c49f0a465b4d6996dec969adec3a47bd" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-stop.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Stop />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-stop-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Clear (ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-clear.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=23e0ac38da07bfee70883468862fc09b" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-clear.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Clear />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-clear-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Thread Mode

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-overview.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=c8883745b7f7a2801182ac5e11f740e7" alt="" width="1280" height="650" data-path="images/customization/recorder/screen-control-panel-floating-mode-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode>
            <VeltRecorderControlPanelWireframe.ThreadMode.Video />
            <VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer />
            <VeltRecorderControlPanelWireframe.ThreadMode.Loading />
            <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar />
        </VeltRecorderControlPanelWireframe.ThreadMode>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-thread-mode-wireframe>
            <velt-recorder-control-panel-video-wireframe />
            <velt-recorder-control-panel-loading-wireframe />
            <velt-recorder-control-panel-action-bar-wireframe />
            <velt-recorder-control-panel-screen-mini-container-wireframe />
        </velt-recorder-control-panel-thread-mode-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Video (Thread Mode)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-container-video.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=c1224a0de7f7e37e713e1fa866fc1c14" alt="" width="1280" height="534" data-path="images/customization/recorder/screen-control-panel-floating-mode-container-video.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.Video />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-video-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Loading (Thread Mode)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-loading.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=7db3427b821934864d2f494b2b208262" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-loading.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.Loading />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-loading-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### ActionBar (Thread Mode)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=e4954b6fef4adb8fb92ddccb81366f7b" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar.png" />

<Note>This ActionBar is similar in structure to the Floating Mode ActionBar but specific to ThreadMode.</Note>

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar>
            <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.TypeIcon />
            <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Time />
            <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Waveform />
            <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle />
            <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Pip />
            <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Stop />
            <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Clear />
        </VeltRecorderControlPanelWireframe.ThreadMode.ActionBar>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-wireframe>
            <velt-recorder-control-panel-action-bar-type-icon-wireframe />
            <velt-recorder-control-panel-action-bar-time-wireframe />
            <velt-recorder-control-panel-action-bar-waveform-wireframe />
            <velt-recorder-control-panel-action-bar-toggle-wireframe />
            <velt-recorder-control-panel-action-bar-pip-wireframe />
            <velt-recorder-control-panel-action-bar-stop-wireframe />
            <velt-recorder-control-panel-action-bar-clear-wireframe />
        </velt-recorder-control-panel-action-bar-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### TypeIcon (Thread Mode ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-type-icon.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=8b8c8fa30e012ea7530f2483da9dbe59" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-type-icon.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.TypeIcon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-type-icon-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Time (Thread Mode ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-time.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=58927b60961c7bcf164885e1eedba269" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-time.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Time />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-time-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Waveform (Thread Mode ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-waveform.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=b6df7f8d2587394f82da88f00d368d63" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-waveform.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Waveform />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-waveform-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Toggle (Thread Mode ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-toggle.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=c7d66a2e192e8ec3fcf4db2d3d570b3b" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-toggle.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle>
            <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Pause />
            <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Play />
        </VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-toggle-wireframe>
            <velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
            <velt-recorder-control-panel-action-bar-toggle-play-wireframe />
        </velt-recorder-control-panel-action-bar-toggle-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### Pause (Thread Mode Toggle)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=05c250f325bde68c0105dfd3a0a860fc" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Pause />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### Play (Thread Mode Toggle)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=a8ed60f12f74d49a88c4f55bb0be861f" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-toggle-play.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Play />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-toggle-play-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Pip (Thread Mode ActionBar)

Picture-in-Picture button for screen recordings with camera in Thread Mode. This allows users to view the recording in a floating window during screen capture.

<Warning>
  Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
</Warning>

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Pip />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-pip-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Stop (Thread Mode ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-stop.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=c49f0a465b4d6996dec969adec3a47bd" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-stop.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Stop />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-stop-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Clear (Thread Mode ActionBar)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-action-bar-clear.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=23e0ac38da07bfee70883468862fc09b" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-action-bar-clear.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Clear />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-action-bar-clear-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### ScreenMiniContainer (Thread Mode)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=38727cadfececa8d63b41b9888964b6c" alt="" width="1280" height="298" data-path="images/customization/recorder/mini-screen-control-panel-floating-mode-container.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer>
            <VeltRecorderControlPanelWireframe.ThreadMode.Video />
            <VeltRecorderControlPanelWireframe.ThreadMode.Screen />
        </VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-screen-mini-container-wireframe>
            <velt-recorder-control-panel-video-wireframe />
            <velt-recorder-control-panel-screen-wireframe />
        </velt-recorder-control-panel-screen-mini-container-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Video (Thread Mode ScreenMiniContainer)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=f562edcb72293f20a0b2e6286dbdd2b3" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png" />

<Note>This is the same Video component as used in the main Thread Mode section.</Note>

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.Video />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-video-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Screen (Thread Mode ScreenMiniContainer)

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=e2e08c5eee0fae921ce5b3638a5524e6" alt="" width="1280" height="298" data-path="images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderControlPanelWireframe.ThreadMode.Screen />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-control-panel-screen-wireframe />
    </velt-wireframe>
    ```
  </Tab>
</Tabs>
