> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Recording Preview Steps Dialog
> Recording preview steps dialog 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}
```
### Audio
This component is used for audio recording preview.
```jsx theme={null}
```
```html theme={null}
```
#### Audio Bottom Panel
Bottom panel of the audio recording preview dialog.
```jsx theme={null}
```
```html theme={null}
```
##### Icon
```jsx theme={null}
```
```html theme={null}
```
##### Countdown
```jsx theme={null}
```
```html theme={null}
```
##### Close
```jsx theme={null}
```
```html theme={null}
```
#### Audio Button Panel
Button panel of the audio recording preview dialog.
```jsx theme={null}
```
```html theme={null}
```
##### Start Recording
```jsx theme={null}
```
```html theme={null}
```
##### Mic Button
```jsx theme={null}
```
```html theme={null}
```
###### On
```jsx theme={null}
```
```html theme={null}
```
###### Off
```jsx theme={null}
```
```html theme={null}
```
##### Settings
```jsx theme={null}
```
```html theme={null}
```
#### Audio Timer
Timer of the audio recording preview dialog.
```jsx theme={null}
```
```html theme={null}
```
##### Countdown
```jsx theme={null}
```
```html theme={null}
```
##### Cancel
```jsx theme={null}
```
```html theme={null}
```
#### Close Button
```jsx theme={null}
```
```html theme={null}
```
#### Waveform
```jsx theme={null}
```
```html theme={null}
```
#### Settings Panel
```jsx theme={null}
```
```html theme={null}
```
### Video
This component is used for both video and screen recording previews.
```jsx theme={null}
```
```html theme={null}
```
#### Video Bottom Panel
Bottom panel of the video recording preview dialog.
```jsx theme={null}
// If you want to customize the Icon for individual media types, you can use the following:
{/* Your custom icon here */}
{/* Your custom icon here */}
{/* Your custom icon here */}
```
```html theme={null}
```
##### Icon
```jsx theme={null}
// To customize for a specific media type:
{/* audio icon */}
{/* video icon */}
{/* screen icon */}
```
```html theme={null}
```
##### Countdown
```jsx theme={null}
```
```html theme={null}
```
##### Close
```jsx theme={null}
```
```html theme={null}
```
#### Video Button Panel
Button panel of the video recording preview dialog.
```jsx theme={null}
```
```html theme={null}
```
##### Start Recording
```jsx theme={null}
```
```html theme={null}
```
##### Mic Button
```jsx theme={null}
```
```html theme={null}
```
###### On
```jsx theme={null}
```
```html theme={null}
```
###### Off
```jsx theme={null}
```
```html theme={null}
```
##### Camera Button
```jsx theme={null}
```
```html theme={null}
```
###### On
```jsx theme={null}
```
```html theme={null}
```
###### Off
```jsx theme={null}
```
```html theme={null}
```
##### Settings
```jsx theme={null}
```
```html theme={null}
```
#### Video Timer
Timer of the video recording preview dialog.
```jsx theme={null}
```
```html theme={null}
```
##### Countdown
```jsx theme={null}
```
```html theme={null}
```
##### Cancel
```jsx theme={null}
```
```html theme={null}
```
#### Waveform
```jsx theme={null}
```
```html theme={null}
```
#### Close Button
```jsx theme={null}
```
```html theme={null}
```
#### Camera Off Message
```jsx theme={null}
```
```html theme={null}
```
#### Settings Panel
```jsx theme={null}
```
```html theme={null}
```
#### Video Player
```jsx theme={null}
```
```html theme={null}
```
#### ScreenPlayer (Video)
This component is used for screen recording preview within the video dialog. It displays the screen capture content for screen recordings.
```jsx theme={null}
```
```html theme={null}
```