DragHandle

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.

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

States

Hide code
function DragHandleStatesExample() {
  return (
    <Stack>
      <DragHandle isActive label="Active drag handle" />
      <DragHandle isFocused label="Focus drag handle" />
      <DragHandle isHovered label="Hovered drag handle" />
    </Stack>
  );
}
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

Hide code
<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>

Accessibility

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