---
name: Media
route: /components/common/controls/control-media
menu: Controls
edit: false
---

import { Playground, Props } from 'docz'
import ControlMedia from './control-media'

# ControlMedia
**SUBCATEGORY:** Controls

<hr />

## Media (play)
### Description
For playing media. Useful where the control may overlap other objects.

<Playground>
  <ControlMedia />
</Playground>

**Disabled**
<Playground>
  <ControlMedia disabled />
</Playground>

<hr />

## Media (inverse, play)
### Description
For playing media. Useful where the control may overlap other objects.

<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <ControlMedia inverse />
</Playground>

**Disabled**
<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <ControlMedia inverse disabled />
</Playground>

<hr />

## Media (pause)
### Description
For pausing media. Useful where the control may overlap other objects.

<Playground>
  <ControlMedia controlType='pause' />
</Playground>

**Disabled**
<Playground>
  <ControlMedia controlType='pause' disabled />
</Playground>

<hr />

## Media (inverse, pause)
### Description
For pausing media. Useful where the control may overlap other objects.

<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <ControlMedia inverse controlType='pause' />
</Playground>

**Disabled**
<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <ControlMedia inverse disabled controlType='pause' />
</Playground>

<hr />

## Media (stop)
### Description
For stopping media. Useful where the control may overlap other objects.

<Playground>
  <ControlMedia controlType='stop' />
</Playground>

**Disabled**
<Playground>
  <ControlMedia controlType='stop' disabled />
</Playground>

<hr />

## Media (inverse, stop)
### Description
For stopping media. Useful where the control may overlap other objects.

<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <ControlMedia inverse controlType='stop' />
</Playground>

**Disabled**
<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <ControlMedia inverse disabled controlType='stop' />
</Playground>


## Properties
<Props of={ControlMedia} />