Drag Handle Button

A button styled to look like a drag handle

This component does not use the @atlaskit/button component, because @atlaskit/button cancels mousedown events and prevents dragging from occurring. Instead this component uses a native <button> element.

Default

import React from 'react';

import { DragHandleButton } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button';

export default function DragHandleButtonExample(): React.JSX.Element {
	return (
		<React.StrictMode>
			<DragHandleButton label="Reorder" />
		</React.StrictMode>
	);
}

Small variant (deprecated)

The small variant has now been deprecated.

DragHandleButtonSmall uses a tiny icon size that is no longer supported by our icon system (the smallest icon size is now 12px x 12px)
Icons smaller than 12px x 12px are not good for visibility and accessibility
The small hitbox of DragHandleButtonSmall (8px x 16px) is below our 24px x 24px minimum hit target size for accessibility. More details, (opens new window)

A small variant is available through the /drag-handle-button-small entrypoint.

It is intended for experiences with very limited space to accommodate a drag handle. It is not recommended for general use due to the small target size.

import React from 'react';

import { DragHandleButtonSmall } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button-small';

export default function DragHandleButtonSmallExample(): React.JSX.Element {
	return (
		<React.StrictMode>
			<DragHandleButtonSmall label="Reorder" />
		</React.StrictMode>
	);
}

This component can be composed with Dropdown menu.

Because the Dropdown menu provides a triggerRef you will need to merge it with your own ref in order to use the trigger as the dragHandle in your draggable() registration.

Was this page helpful?

We use this feedback to improve our documentation.