> ## Documentation Index
> Fetch the complete documentation index at: https://velt-codex-ui-customization-guide-refresh.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Control Panel
> Recorder control panel component.
We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
## Overview
```jsx theme={null}
```
```html theme={null}
```
## Floating Mode
```jsx theme={null}
```
```html theme={null}
```
### Container (Floating Mode)
```jsx theme={null}
```
```html theme={null}
```
#### Video (Floating Mode Container)
```jsx theme={null}
```
```html theme={null}
```
#### Waveform (Floating Mode Container)
```jsx theme={null}
```
```html theme={null}
```
#### CollapsedButton (Floating Mode Container)
```jsx theme={null}
```
```html theme={null}
```
##### On (CollapsedButton)
```jsx theme={null}
```
```html theme={null}
```
##### Off (CollapsedButton)
```jsx theme={null}
```
```html theme={null}
```
#### Paused (Floating Mode Container)
```jsx theme={null}
```
```html theme={null}
```
### ScreenMiniContainer (Floating Mode)
```jsx theme={null}
```
```html theme={null}
```
#### Video (Floating Mode ScreenMiniContainer)
This is the same Video component as used in the Floating Mode Container.
```jsx theme={null}
```
```html theme={null}
```
#### Screen (Floating Mode ScreenMiniContainer)
```jsx theme={null}
```
```html theme={null}
```
### Loading (Floating Mode)
```jsx theme={null}
```
```html theme={null}
```
### ActionBar (Floating Mode)
```jsx theme={null}
```
```html theme={null}
```
#### TypeIcon (ActionBar)
```jsx theme={null}
```
```html theme={null}
```
#### Time (ActionBar)
```jsx theme={null}
```
```html theme={null}
```
#### Waveform (ActionBar)
```jsx theme={null}
```
```html theme={null}
```
#### Toggle (ActionBar)
```jsx theme={null}
```
```html theme={null}
```
##### Pause (Toggle)
```jsx theme={null}
```
```html theme={null}
```
##### Play (Toggle)
```jsx theme={null}
```
```html theme={null}
```
#### 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.
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.
```jsx theme={null}
```
```html theme={null}
```
#### Stop (ActionBar)
```jsx theme={null}
```
```html theme={null}
```
#### Clear (ActionBar)
```jsx theme={null}
```
```html theme={null}
```
## Thread Mode
```jsx theme={null}
```
```html theme={null}
```
### Video (Thread Mode)
```jsx theme={null}
```
```html theme={null}
```
### Loading (Thread Mode)
```jsx theme={null}
```
```html theme={null}
```
### ActionBar (Thread Mode)
This ActionBar is similar in structure to the Floating Mode ActionBar but specific to ThreadMode.
```jsx theme={null}
```
```html theme={null}
```
#### TypeIcon (Thread Mode ActionBar)
```jsx theme={null}
```
```html theme={null}
```
#### Time (Thread Mode ActionBar)
```jsx theme={null}
```
```html theme={null}
```
#### Waveform (Thread Mode ActionBar)
```jsx theme={null}
```
```html theme={null}
```
#### Toggle (Thread Mode ActionBar)
```jsx theme={null}
```
```html theme={null}
```
##### Pause (Thread Mode Toggle)
```jsx theme={null}
```
```html theme={null}
```
##### Play (Thread Mode Toggle)
```jsx theme={null}
```
```html theme={null}
```
#### 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.
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.
```jsx theme={null}
```
```html theme={null}
```
#### Stop (Thread Mode ActionBar)
```jsx theme={null}
```
```html theme={null}
```
#### Clear (Thread Mode ActionBar)
```jsx theme={null}
```
```html theme={null}
```
### ScreenMiniContainer (Thread Mode)
```jsx theme={null}
```
```html theme={null}
```
#### Video (Thread Mode ScreenMiniContainer)
This is the same Video component as used in the main Thread Mode section.
```jsx theme={null}
```
```html theme={null}
```
#### Screen (Thread Mode ScreenMiniContainer)
```jsx theme={null}
```
```html theme={null}
```