> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-7bb0f5fc.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Recorder Player Expanded

> Recorder player expanded component. This is the expanded player that appears when user wants to view the recording in full screen.

<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-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-overview.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=80d448140b7f0106d6a2155b02a70064" alt="" width="1280" height="721" data-path="images/customization/recorder/recorder-player-expanded-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe>
            <VeltRecorderPlayerExpandedWireframe.Panel />
            <VeltRecorderPlayerExpandedWireframe.Transcription />
        </VeltRecorderPlayerExpandedWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-wireframe>
            <velt-recorder-player-expanded-panel-wireframe></velt-recorder-player-expanded-panel-wireframe>
            <velt-recorder-player-expanded-transcription-wireframe></velt-recorder-player-expanded-transcription-wireframe>
        </velt-recorder-player-expanded-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Panel

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-overview.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=89eba1139c4644533a5f2a3cd0edb615" alt="" width="1280" height="721" data-path="images/customization/recorder/recorder-player-expanded-panel-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Panel>
            <VeltRecorderPlayerExpandedWireframe.Display />
            <VeltRecorderPlayerExpandedWireframe.CopyLink />
            <VeltRecorderPlayerExpandedWireframe.MinimizeButton />
            <VeltRecorderPlayerExpandedWireframe.Subtitles />
            <VeltRecorderPlayerExpandedWireframe.Controls />
        </VeltRecorderPlayerExpandedWireframe.Panel>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-panel-wireframe>
            <velt-recorder-player-expanded-display-wireframe></velt-recorder-player-expanded-display-wireframe>
            <velt-recorder-player-expanded-subtitles-wireframe></velt-recorder-player-expanded-subtitles-wireframe>
            <velt-recorder-player-expanded-copy-link-wireframe></velt-recorder-player-expanded-copy-link-wireframe>
            <velt-recorder-player-expanded-minimize-button-wireframe></velt-recorder-player-expanded-minimize-button-wireframe>
            <velt-recorder-player-expanded-controls-wireframe></velt-recorder-player-expanded-controls-wireframe>
        </velt-recorder-player-expanded-panel-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Display

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-display.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=33531a8d9b17f89710daceb852b53399" alt="" width="1280" height="721" data-path="images/customization/recorder/recorder-player-expanded-panel-display.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Display />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-display-wireframe></velt-recorder-player-expanded-display-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Subtitles

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-subtitles.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=747609ad47e022a9c07df3b073e237fd" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-subtitles.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Subtitles />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-subtitles-wireframe></velt-recorder-player-expanded-subtitles-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### CopyLink

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-copy-link.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=ac5deb9d58e118debe720df07b9d88fc" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-copy-link.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.CopyLink />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-copy-link-wireframe></velt-recorder-player-expanded-copy-link-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### MinimizeButton

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-minimize.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=f6cef8dc9644aaab862e3a6b1d21577f" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-minimize.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.MinimizeButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-minimize-button-wireframe></velt-recorder-player-expanded-minimize-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Controls

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-controls.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=fcb4206088e6a081b24cfd10f3aef0f5" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls>
            <VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
            <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton />
            <VeltRecorderPlayerExpandedWireframe.Controls.Time />
            <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton />
            <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton />
            <VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
            <VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
            <VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
        </VeltRecorderPlayerExpandedWireframe.Controls>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-wireframe>
            <velt-recorder-player-expanded-controls-progress-bar-wireframe></velt-recorder-player-expanded-controls-progress-bar-wireframe>
            <velt-recorder-player-expanded-controls-toggle-button-wireframe></velt-recorder-player-expanded-controls-toggle-button-wireframe>
            <velt-recorder-player-expanded-controls-time-wireframe></velt-recorder-player-expanded-controls-time-wireframe>
            <velt-recorder-player-expanded-controls-subtitle-button-wireframe></velt-recorder-player-expanded-controls-subtitle-button-wireframe>
            <velt-recorder-player-expanded-controls-transcription-button-wireframe></velt-recorder-player-expanded-controls-transcription-button-wireframe>
            <velt-recorder-player-expanded-controls-volume-button-wireframe></velt-recorder-player-expanded-controls-volume-button-wireframe>
            <velt-recorder-player-expanded-controls-settings-button-wireframe></velt-recorder-player-expanded-controls-settings-button-wireframe>
            <velt-recorder-player-expanded-controls-delete-button-wireframe></velt-recorder-player-expanded-controls-delete-button-wireframe>
        </velt-recorder-player-expanded-controls-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### ProgressBar

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-controls-progress-bar.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=2c334b353e3ac94d1bc3a21b011fc746" alt="" width="1280" height="244" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-progress-bar.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.ProgressBar />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-progress-bar-wireframe></velt-recorder-player-expanded-controls-progress-bar-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### ToggleButton

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-controls-toggle-icon.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=0ae0d6a367d3ba7634137354d5aa1e5b" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-toggle-icon.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
            <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
            <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
        </VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-toggle-button-wireframe>
            <velt-recorder-player-expanded-controls-toggle-pause-wireframe></velt-recorder-player-expanded-controls-toggle-pause-wireframe>
            <velt-recorder-player-expanded-controls-toggle-play-wireframe></velt-recorder-player-expanded-controls-toggle-play-wireframe>
        </velt-recorder-player-expanded-controls-toggle-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### Pause

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Pause />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-toggle-pause-wireframe></velt-recorder-player-expanded-controls-toggle-pause-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### Play

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.ToggleButton.Play />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-toggle-play-wireframe></velt-recorder-player-expanded-controls-toggle-play-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Time

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-controls-time.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=544e68fbfe448a0a0bd0a7cd688eb925" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-time.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.Time>
            <VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
    				<!-- Add custom divider by adding any tag like <p> / <p> -->
            <VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
        </VeltRecorderPlayerExpandedWireframe.Controls.Time>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-time-wireframe>
            <velt-recorder-player-expanded-controls-current-time-wireframe></velt-recorder-player-expanded-controls-current-time-wireframe>
            <velt-recorder-player-expanded-controls-total-time-wireframe></velt-recorder-player-expanded-controls-total-time-wireframe>
        </velt-recorder-player-expanded-controls-time-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### CurrentTime

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.CurrentTime />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-current-time-wireframe></velt-recorder-player-expanded-controls-current-time-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### TotalTime

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.TotalTime />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-total-time-wireframe></velt-recorder-player-expanded-controls-total-time-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### SubtitleButton

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-controls-subtitles.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=fd42ba1254fa651ca2ab4d371f4b7d39" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-subtitles.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
            <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
            <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
        </VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-subtitle-button-wireframe>
            <velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe></velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe>
            <velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe></velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe>
        </velt-recorder-player-expanded-controls-subtitle-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### Icon

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Icon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe></velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### Tooltip

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.SubtitleButton.Tooltip />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe></velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### TranscriptionButton

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-controls-transcription.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=e1280ffc810dc86055aadab1e5d2002f" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-transcription.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
            <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
            <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
        </VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-transcription-button-wireframe>
            <velt-recorder-player-expanded-controls-transcription-button-icon-wireframe></velt-recorder-player-expanded-controls-transcription-button-icon-wireframe>
            <velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe></velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe>
        </velt-recorder-player-expanded-controls-transcription-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### Icon

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Icon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-transcription-button-icon-wireframe></velt-recorder-player-expanded-controls-transcription-button-icon-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### Tooltip

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.TranscriptionButton.Tooltip />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe></velt-recorder-player-expanded-controls-transcription-button-tooltip-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### VolumeButton

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-controls-volume.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=12eb871f75319f7184cee078de3a5063" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-volume.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.VolumeButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-volume-button-wireframe></velt-recorder-player-expanded-controls-volume-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### SettingsButton

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-controls-settings.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=b457eca7406e59527d875bbcb6c72dc8" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-settings.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.SettingsButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-settings-button-wireframe></velt-recorder-player-expanded-controls-settings-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### DeleteButton

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-panel-controls-delete.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=df189237c16988b9b35233f06dc57c41" alt="" width="1280" height="344" data-path="images/customization/recorder/recorder-player-expanded-panel-controls-delete.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Controls.DeleteButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-controls-delete-button-wireframe></velt-recorder-player-expanded-controls-delete-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Transcription

<img src="https://mintcdn.com/velt-mintlify-7bb0f5fc/v6WhA6ulsi9Sy4Rs/images/customization/recorder/recorder-player-expanded-transcription.png?fit=max&auto=format&n=v6WhA6ulsi9Sy4Rs&q=85&s=08a3052ad1866a0f0a3b1a381fbfb522" alt="" width="1280" height="721" data-path="images/customization/recorder/recorder-player-expanded-transcription.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerExpandedWireframe.Transcription />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-expanded-transcription-wireframe></velt-recorder-player-expanded-transcription-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>
