DragHandle

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.

Import

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:

Base:

Active:

Focused:

Hovered:

Card example

Props (API reference)

Open in Storybook

Name

Type

Default

label
required
string

Label rendered in DragHandle - not visible on screen as its purpose is for screen readers only

as
HTML Tag or React Component (e.g. div, span, etc)

The element used for the root node

div
className
string

CSS class to be appended to the root element

isActive
false
true

Applies styling for when the component is actively being dragged by the user

isFocused
false
true

Applies focus styling

isHovered
false
true

Applies hover styling

testId
string

A [data-test-id] attribute used for testing purposes

type
string

Set type button for div element

Accessibility

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