Forma 36 - DragHandle

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:


<DragHandle label="Drag handle" /><DragHandle label="Drag handle" />

Active:


<DragHandle isActive label="Active drag handle" /><DragHandle isActive label="Active drag handle" />

Focused:


<DragHandle isFocused label="Focus drag handle" /><DragHandle isFocused label="Focus drag handle" />

Hovered:


<DragHandle isHovered label="Hovered drag handle" /><DragHandle isHovered label="Hovered drag handle" />

Card example


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

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.

Import

Examples

Card example

Props (API reference)

Name

Type

Default

Accessibility

Help improve this page