> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-61b98a3d.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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-overview-modes.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=ad30083cf58befeac272ad112fe4c37c" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-overview.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=11299364d0b094c18525960f4ccdccb6" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=4af508537aa0f65a36ef7738acf9c076" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-container-video.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=b244df91937a26573a650d4f91d9dd92" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-container-waveform.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=464bedd79ae322cfb177f485eae82cad" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-container-collapse.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=c9a018b4111a6818a7db71bd390b4523" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-on.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=77a898d859a4baa4f25bc15bae41df22" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-off.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=874731607bea41b2765bca1610a93838" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-container-paused.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=ca326d374719b4338235ff712f75977a" 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-61b98a3d/duys-TW1uAdq82aa/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=duys-TW1uAdq82aa&q=85&s=99e18e4fef7b3a552b5b9151668c1f51" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=ddd0ffd251888bc95b27eecc19fc976c" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=7e89b3e47d8ff56a1c1b4a4a536e6621" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-loading.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=9700288445702bf80609a2dbc36cdd49" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=33ed8cebaee9294fbd26c65c00a9607e" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-type-icon.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=59b62e9f1cc1440041746a61e9aa7091" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-time.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=34f1dbda740d9f14176588da9e0637c4" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-waveform.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=e5bee5a0666a93183cc1cd0ae33e43f2" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-toggle.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=76637df49bb63e516c8be0112cdbdaf9" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=47e3fd209c1ac53cd1637bb3d5e4f8ff" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=5a11004c82d9cdf247e96cb8ec751a0a" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-stop.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=f67b983431f254d381673943b92a29e8" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-clear.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=e090da0799870fcbb5a029867c3e9ccc" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-overview.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=11299364d0b094c18525960f4ccdccb6" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-container-video.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=b244df91937a26573a650d4f91d9dd92" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-loading.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=9700288445702bf80609a2dbc36cdd49" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=33ed8cebaee9294fbd26c65c00a9607e" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-type-icon.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=59b62e9f1cc1440041746a61e9aa7091" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-time.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=34f1dbda740d9f14176588da9e0637c4" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-waveform.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=e5bee5a0666a93183cc1cd0ae33e43f2" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-toggle.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=76637df49bb63e516c8be0112cdbdaf9" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=47e3fd209c1ac53cd1637bb3d5e4f8ff" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=5a11004c82d9cdf247e96cb8ec751a0a" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-stop.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=f67b983431f254d381673943b92a29e8" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-action-bar-clear.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=e090da0799870fcbb5a029867c3e9ccc" 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-61b98a3d/duys-TW1uAdq82aa/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=duys-TW1uAdq82aa&q=85&s=99e18e4fef7b3a552b5b9151668c1f51" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=ddd0ffd251888bc95b27eecc19fc976c" 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-61b98a3d/czKy83fnnEHQBZNg/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png?fit=max&auto=format&n=czKy83fnnEHQBZNg&q=85&s=7e89b3e47d8ff56a1c1b4a4a536e6621" 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>
