> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-f35f8a05.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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-overview-modes.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=33ab0b042fbc9bc520739610d2048c1a" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-overview.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=f4edc292ce62e7bc4e433ece84032923" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=38719fdb6f0ff4f1335c5a5b130898be" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-container-video.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=2d5b0ba347caf53692eb33d0a77d1a55" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-container-waveform.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=6128cfedd31ee928db1faba35eeeec74" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-container-collapse.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=1cbeb11812640d6dd188124debe335b9" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-on.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=6984c4e8183b47ee13211306bac52902" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-off.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=a758d3758a3aae557cc3fbfdd3cc94ea" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-container-paused.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=0534c7ba67247ffc532634b130ab55c2" 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-f35f8a05/N7hGKklmI18j9wzb/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=N7hGKklmI18j9wzb&q=85&s=480b1ed20fa59d09e11dc0b1ce168363" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=7aaf05707fb6477de621fddb9ff1e6ae" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=48e62ea93b66892893d9f3e78d920b5c" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-loading.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=4a2986b21dd5f58d191781cb923235a8" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=7bda6f9497b7e2d67ddf15c275a495fb" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-type-icon.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=c003a49a2cdeb03af8886537c6971e3a" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-time.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=d0ac4a849bb35816201ac7edaf00c281" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-waveform.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=fe4b5cad2c4d9c040aa6f0a435f8e96e" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-toggle.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=ac1d641a44067d4bc557b81ddf279632" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=506fd6c2b0e6814eabe646f2450685c9" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=05ab67d090d0f8d2b7279c8326daf173" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-stop.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=82c058f4c395d4bf4bf8e13fb5acf8a3" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-clear.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=f68d3d5a71a3536f48340917f7feec84" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-overview.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=f4edc292ce62e7bc4e433ece84032923" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-container-video.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=2d5b0ba347caf53692eb33d0a77d1a55" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-loading.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=4a2986b21dd5f58d191781cb923235a8" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=7bda6f9497b7e2d67ddf15c275a495fb" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-type-icon.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=c003a49a2cdeb03af8886537c6971e3a" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-time.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=d0ac4a849bb35816201ac7edaf00c281" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-waveform.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=fe4b5cad2c4d9c040aa6f0a435f8e96e" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-toggle.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=ac1d641a44067d4bc557b81ddf279632" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=506fd6c2b0e6814eabe646f2450685c9" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=05ab67d090d0f8d2b7279c8326daf173" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-stop.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=82c058f4c395d4bf4bf8e13fb5acf8a3" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-action-bar-clear.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=f68d3d5a71a3536f48340917f7feec84" 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-f35f8a05/N7hGKklmI18j9wzb/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=N7hGKklmI18j9wzb&q=85&s=480b1ed20fa59d09e11dc0b1ce168363" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=7aaf05707fb6477de621fddb9ff1e6ae" 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-f35f8a05/SRBnnaAA17RVoMMb/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png?fit=max&auto=format&n=SRBnnaAA17RVoMMb&q=85&s=48e62ea93b66892893d9f3e78d920b5c" 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>
