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:

Variants

DragHandle has 2 different variants:

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


function DragHandleVariantsExample() {
  return (
    <Stack>
      <DragHandle label="Drag handle" />
      <DragHandle variant="transparent" label="Transparent drag handle" />
    </Stack>
  );
}
Open in Playground

States


function DragHandleStatesExample() {
  return (
    <Stack>
      <DragHandle isActive label="Active drag handle" />
      <DragHandle isFocused label="Focus drag handle" />
      <DragHandle isHovered label="Hovered drag handle" />
    </Stack>
  );
}
Open in Playground

Card example


<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
variant	"secondary" "transparent" Determines style variation	secondary

Accessibility

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

Import

Examples

Variants

States

Card example

Props (API reference)

Name

Type

Default

Accessibility

Help improve this page