> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-d39a5459.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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-overview-modes.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=d97f751c87be099ada3b656a96285d53" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-overview.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=53536ba4884863ab90aaca2ed14b0ace" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=4e50bfacf6e9d457bfd936a0b89de78b" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-container-video.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=885be759189ac1f18d5f8b13b73b21d6" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-container-waveform.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=80881b1a8899a39d6bcd204a2b12cf1f" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-container-collapse.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=ccc23c8c5c9f334e70476b2261e1a2d9" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-on.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=312fafe21b200789795223b9e1e098f6" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-off.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=82d8be9ecf0e8de0a0645e87d0b78e9c" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-container-paused.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=42d28623d83c2678ac25a88e6ba00ea8" 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-d39a5459/qCPqmiHJPomxBHuB/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=qCPqmiHJPomxBHuB&q=85&s=ad38dce5b0ba158f2a7f2c4419775474" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=b61ac89aa55d24df01ac5f4ce047b1c7" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=94a46c14a0d1608872a1d6a0d399f500" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-loading.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=27205f13da288b2eb010dd535cca85db" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=4ea0d61062c628abc1fb3507553b164c" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-type-icon.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=baed0e6b0f823b863615e140d92bff96" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-time.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=567f5effca1e4c1b59644edc62e2d2cf" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-waveform.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=c741dded20f364e7b3b818c17082e420" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-toggle.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=3b78720dedf0f4a5565266217216ab83" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=417d72ffc3524ac4e673cb1d3fdb4319" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=e8846e086a71cc5053b7af7222ec82c0" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-stop.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=432c12e976d0dbf6d34e6b2289cbf414" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-clear.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=7c5a3da3cdb898260fed5c414f80d3b7" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-overview.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=53536ba4884863ab90aaca2ed14b0ace" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-container-video.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=885be759189ac1f18d5f8b13b73b21d6" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-loading.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=27205f13da288b2eb010dd535cca85db" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=4ea0d61062c628abc1fb3507553b164c" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-type-icon.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=baed0e6b0f823b863615e140d92bff96" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-time.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=567f5effca1e4c1b59644edc62e2d2cf" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-waveform.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=c741dded20f364e7b3b818c17082e420" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-toggle.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=3b78720dedf0f4a5565266217216ab83" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=417d72ffc3524ac4e673cb1d3fdb4319" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=e8846e086a71cc5053b7af7222ec82c0" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-stop.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=432c12e976d0dbf6d34e6b2289cbf414" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-action-bar-clear.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=7c5a3da3cdb898260fed5c414f80d3b7" 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-d39a5459/qCPqmiHJPomxBHuB/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=qCPqmiHJPomxBHuB&q=85&s=ad38dce5b0ba158f2a7f2c4419775474" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=b61ac89aa55d24df01ac5f4ce047b1c7" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=94a46c14a0d1608872a1d6a0d399f500" 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>
