---
title: 'DragHandle'
type: 'component'
status: 'stable'
slug: /components/drag-handle/
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/drag-handle'
typescript: ./src/DragHandle.tsx
storybook: 'https://f36-storybook.contentful.com/?path=/story/components-draghandle--default'
---

import { Heading, Stack, TextLink } from '@contentful/f36-components';
import { ArrowSquareOutIcon } from '@contentful/f36-icons';

DragHandle is a new component to make it easier when creating draggable elements. it contains the styling for focus, hover and dragging states.
This component only needs to be used if you're creating a custom component with drag, some of our components already have this implemented, for example [Card](/components/card).

## Import

```js static=true
import { DragHandle } from '@contentful/f36-components';
// or
import { DragHandle } from '@contentful/f36-drag-handle';
```

## Examples

The DragHandle can be styled based on the props you pass to it:

### Variants

DragHandle has 2 different variants:

- **Secondary** - Default variant.
- **Transparent** - For having an unstyled DragHandle.

```jsx file=./examples/DragHandleVariantsExample.tsx

```

### States

```jsx file=./examples/DragHandleStatesExample.tsx

```

### Card example

```jsx
<AssetCard title="Title" withDragHandle>
  <Text>This is a card example with DragHandle</Text>
</AssetCard>
```

<Stack
  justifyContent="space-between"
  marginTop="spacing2Xl"
  marginBottom="spacingL"
>
  <Heading
    id="props-api-reference"
    as="h2"
    marginTop="none"
    marginBottom="none"
  >
    Props (API reference)
  </Heading>
  <TextLink
    href="https://f36-storybook.contentful.com/?path=/story/components-draghandle"
    target="_blank"
    alignIcon="end"
    icon={<ArrowSquareOutIcon />}
  >
    Open in Storybook
  </TextLink>
</Stack>

<PropsTable of="DragHandle" />

## Accessibility

- You should pass a relevant label to DragHandle for screen readers, the label is not rendered.