> ## Documentation Index
> Fetch the complete documentation index at: https://velt-claude-ui-customization-docs-review-m7hwcn.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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-overview.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=a202d55b2488efad07e4cdd0e391a400" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-overview.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=9ac57ad25f5198c1de844739fe7ca26d" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-display.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=bd35b460eae83158aa19456aa67ea1fd" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-subtitles.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=674b69c0aa649d547dd4681f5932242e" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-copy-link.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=26399e97282389c6193fdfee5f4c856b" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-minimize.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=6a6f3b66af262f44ebcd53c17d2b0b37" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-controls.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=aeabc8afcf4462da9ae70e73aff0fe5e" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-controls-progress-bar.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=7c8effb6df53cadb769fb2c1aa5b4e34" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-controls-toggle-icon.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=c23e83253ed1863e1d4c29be9ce84c8d" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-controls-time.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=0b3fb6398affa79440d349deb9000322" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-controls-subtitles.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=6d044acaa78279080f88c7def6dbaac2" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-controls-transcription.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=5127931c8704662445db2a7df4f5d887" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-controls-volume.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=c7b327f47336d1402d9466a13e13b28e" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-controls-settings.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=b49130cbc2db953bd63aefaaa8e99ca7" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-panel-controls-delete.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=ecf45350149bdd5a50afb68bb2aaebd4" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/recorder-player-expanded-transcription.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=4a6ef1639323f3121bc96d3816523c9f" 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>
