> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-12.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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-overview-modes.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=f61eaeaff0f4c1fa7baa18e1bc10dfd5" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-overview.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=1ac4b83604148f50e18b94b527a31904" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=a63682f706d42a15bef79233f238203d" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-container-video.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=e0f446a1c70a5da39a7d40bddd00193f" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-container-waveform.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=37c61dfd150732b5e02e643635a70540" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-container-collapse.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=6921ed460087359e881c17105098a2a7" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-on.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=647d099738bbafe97c83c7792a142430" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-container-collapse-off.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=32f7ad6d12f24ee1cad46c126489e680" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-container-paused.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=30bc4728fa7ca60881114af2638cd86d" 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-v6-0-0-beta-12/K9u8bOr9Yf6GRV90/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=K9u8bOr9Yf6GRV90&q=85&s=b3c0991ff0a2104dd1e6bcc01e2bf2e0" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=79c1a0e158f66736b8cedafb49d1c45b" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=c2f61e7221d4803a95304b328c33688d" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-loading.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=ec790ef45597cb5b16454c958685c7f8" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=d12f2da9e26cdc9c29cf09845bbbee2c" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-type-icon.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=79a4dfab9599b512e42457d7128f28b6" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-time.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=61499c11e3f807feecb60b12cd5ad6ad" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-waveform.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=9a80863464d8d9959ee3f38ec35a5649" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-toggle.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=086474f550b67375b41cfceaeb7828f7" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=979630d1cbe04153961db7722936c0ec" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=9ff04847e528949151ed3acbdc58cb67" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-stop.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=23992a61c4d2c078df55f2ce2f487bec" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-clear.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=8b3ec4a08f8827efb9adc1c782ee6b1e" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-overview.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=1ac4b83604148f50e18b94b527a31904" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-container-video.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=e0f446a1c70a5da39a7d40bddd00193f" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-loading.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=ec790ef45597cb5b16454c958685c7f8" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=d12f2da9e26cdc9c29cf09845bbbee2c" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-type-icon.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=79a4dfab9599b512e42457d7128f28b6" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-time.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=61499c11e3f807feecb60b12cd5ad6ad" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-waveform.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=9a80863464d8d9959ee3f38ec35a5649" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-toggle.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=086474f550b67375b41cfceaeb7828f7" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-toggle-pause.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=979630d1cbe04153961db7722936c0ec" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-toggle-play.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=9ff04847e528949151ed3acbdc58cb67" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-stop.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=23992a61c4d2c078df55f2ce2f487bec" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-action-bar-clear.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=8b3ec4a08f8827efb9adc1c782ee6b1e" 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-v6-0-0-beta-12/K9u8bOr9Yf6GRV90/images/customization/recorder/mini-screen-control-panel-floating-mode-container.png?fit=max&auto=format&n=K9u8bOr9Yf6GRV90&q=85&s=b3c0991ff0a2104dd1e6bcc01e2bf2e0" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-mini-container-video.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=79c1a0e158f66736b8cedafb49d1c45b" 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-v6-0-0-beta-12/8W2LvIu5A0LuYgOm/images/customization/recorder/screen-control-panel-floating-mode-mini-container-screen.png?fit=max&auto=format&n=8W2LvIu5A0LuYgOm&q=85&s=c2f61e7221d4803a95304b328c33688d" 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>
