---
name: Drag + handle
route: /components/common/controls/control-drag-handle
menu: Controls
edit: false
---

import { Playground, Props } from 'docz'
import ControlDragHandle from './control-drag-handle'

# ControlDragHandle
**SUBCATEGORY:** Controls

<hr />

## Drag + handle
### Description
For revealing or altering media or content, either by peripheral input or drag gesture.

<Playground style={{ height: '8em', display: 'flex', justifyContent: 'center' }}>
  <ControlDragHandle />
</Playground>

**Disabled**
<Playground style={{ height: '8em', display: 'flex', justifyContent: 'center' }}>
  <ControlDragHandle disabled />
</Playground>

<hr />

## Drag + handle (inverse)
### Description
For revealing or altering media or content, either by peripheral input or drag gesture.

<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em', height: '8em', display: 'flex', justifyContent: 'center' }}>
    <ControlDragHandle inverse />
</Playground>

**Disabled**
<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em', height: '8em', display: 'flex', justifyContent: 'center' }}>
  <ControlDragHandle inverse disabled />
</Playground>

<hr />

## Drag + handle (horizontal)
### Description
For revealing or altering media or content, either by peripheral input or drag gesture.

<Playground>
    <ControlDragHandle horizontal />
</Playground>

<Playground>
  <ControlDragHandle horizontal disabled />
</Playground>

<hr />

## Drag + handle (horizontal, inverse)
### Description
For revealing or altering media or content, either by peripheral input or drag gesture.

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

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

<hr />

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