useDrag

Handles drag interactions for an element, with support for traditional mouse and touch based drag and drop, in addition to full parity for keyboard and screen reader users.

install	`yarn add react-aria`
version	3.33.1
usage	`import {useDrag} from 'react-aria'`

View repository

GitHub

View package

NPM

API#

useDrag(
  (options: DragOptions
)): DragResult

Introduction#

Drag and drop is a common UI interaction that allows users to transfer data between two locations by directly moving a visual representation on screen. It is a flexible, efficient, and intuitive way for users to perform a variety of tasks, and is widely supported across both desktop and mobile operating systems.

React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press Enter on a draggable element to enter drag and drop mode. Then, they can press Tab to navigate between drop targets, and Enter to drop or Escape to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop.

See the drag and drop introduction to learn more.

Example#

This example shows how to make a simple draggable element that provides data as plain text. In order to support keyboard and screen reader drag interactions, the element must be focusable and have an ARIA role (in this case, button). While it is being dragged, it is displayed with a dimmed appearance by applying an additional CSS class.

import {useDrag} from 'react-aria';

function Draggable() {
  let { dragProps, isDragging } = useDrag({
    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    }
  });

  return (
    <div
      {...dragProps}
      role="button"
      tabIndex={0}
      className={`draggable ${isDragging ? 'dragging' : ''}`}
    >
      Drag me
    </div>
  );
}

<Draggable />
<DropTarget />

import {useDrag} from 'react-aria';

function Draggable() {
  let { dragProps, isDragging } = useDrag({
    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    }
  });

  return (
    <div
      {...dragProps}
      role="button"
      tabIndex={0}
      className={`draggable ${
        isDragging ? 'dragging' : ''
      }`}
    >
      Drag me
    </div>
  );
}

<Draggable />
<DropTarget />

import {useDrag} from 'react-aria';

function Draggable() {
  let {
    dragProps,
    isDragging
  } = useDrag({
    getItems() {
      return [{
        'text/plain':
          'hello world'
      }];
    }
  });

  return (
    <div
      {...dragProps}
      role="button"
      tabIndex={0}
      className={`draggable ${
        isDragging
          ? 'dragging'
          : ''
      }`}
    >
      Drag me
    </div>
  );
}

<Draggable />
<DropTarget />

Show CSS

.draggable {
  display: inline-block;
  vertical-align: top;
  border: 1px solid gray;
  padding: 10px;
}

.draggable.dragging {
  opacity: 0.5;
}

.droppable {
  width: 100px;
  height: 80px;
  border-radius: 6px;
  display: inline-block;
  padding: 20px;
  margin-left: 20px;
  border: 2px dotted gray;
  white-space: pre-wrap;
}

.droppable.target {
  border: 2px solid var(--blue);
}

.draggable {
  display: inline-block;
  vertical-align: top;
  border: 1px solid gray;
  padding: 10px;
}

.draggable.dragging {
  opacity: 0.5;
}

.droppable {
  width: 100px;
  height: 80px;
  border-radius: 6px;
  display: inline-block;
  padding: 20px;
  margin-left: 20px;
  border: 2px dotted gray;
  white-space: pre-wrap;
}

.droppable.target {
  border: 2px solid var(--blue);
}

.draggable {
  display: inline-block;
  vertical-align: top;
  border: 1px solid gray;
  padding: 10px;
}

.draggable.dragging {
  opacity: 0.5;
}

.droppable {
  width: 100px;
  height: 80px;
  border-radius: 6px;
  display: inline-block;
  padding: 20px;
  margin-left: 20px;
  border: 2px dotted gray;
  white-space: pre-wrap;
}

.droppable.target {
  border: 2px solid var(--blue);
}

DropTarget#

The DropTarget component used above is defined below. See useDrop for more details and documentation.

Show code

import type {TextDropItem} from 'react-aria';
import {useDrop} from 'react-aria';

function DropTarget() {
  let [dropped, setDropped] = React.useState(null);
  let ref = React.useRef(null);
  let { dropProps, isDropTarget } = useDrop({
    ref,
    async onDrop(e) {
      let items = await Promise.all(
        e.items
          .filter((item) =>
            item.kind === 'text' &&
            (item.types.has('text/plain') ||
              item.types.has('my-app-custom-type'))
          )
          .map(async (item: TextDropItem) => {
            if (item.types.has('my-app-custom-type')) {
              return JSON.parse(await item.getText('my-app-custom-type'));
            } else {
              return { message: await item.getText('text/plain') };
            }
          })
      );
      setDropped(items);
    }
  });

  let message = ['Drop here'];
  if (dropped) {
    message = dropped.map((d) => {
      let message = d.message;
      if (d.style === 'bold') {
        message = <strong>{message}</strong>;
      } else if (d.style === 'italic') {
        message = <em>{message}</em>;
      }
      return <div>{message}</div>;
    });
  }

  return (
    <div
      {...dropProps}
      role="button"
      tabIndex={0}
      ref={ref}
      className={`droppable ${isDropTarget ? 'target' : ''}`}
    >
      {message}
    </div>
  );
}

import type {TextDropItem} from 'react-aria';
import {useDrop} from 'react-aria';

function DropTarget() {
  let [dropped, setDropped] = React.useState(null);
  let ref = React.useRef(null);
  let { dropProps, isDropTarget } = useDrop({
    ref,
    async onDrop(e) {
      let items = await Promise.all(
        e.items
          .filter((item) =>
            item.kind === 'text' &&
            (item.types.has('text/plain') ||
              item.types.has('my-app-custom-type'))
          )
          .map(async (item: TextDropItem) => {
            if (item.types.has('my-app-custom-type')) {
              return JSON.parse(
                await item.getText('my-app-custom-type')
              );
            } else {
              return {
                message: await item.getText('text/plain')
              };
            }
          })
      );
      setDropped(items);
    }
  });

  let message = ['Drop here'];
  if (dropped) {
    message = dropped.map((d) => {
      let message = d.message;
      if (d.style === 'bold') {
        message = <strong>{message}</strong>;
      } else if (d.style === 'italic') {
        message = <em>{message}</em>;
      }
      return <div>{message}</div>;
    });
  }

  return (
    <div
      {...dropProps}
      role="button"
      tabIndex={0}
      ref={ref}
      className={`droppable ${
        isDropTarget ? 'target' : ''
      }`}
    >
      {message}
    </div>
  );
}

import type {TextDropItem} from 'react-aria';
import {useDrop} from 'react-aria';

function DropTarget() {
  let [
    dropped,
    setDropped
  ] = React.useState(
    null
  );
  let ref = React.useRef(
    null
  );
  let {
    dropProps,
    isDropTarget
  } = useDrop({
    ref,
    async onDrop(e) {
      let items =
        await Promise
          .all(
            e.items
              .filter(
                (item) =>
                  item
                      .kind ===
                    'text' &&
                  (item
                    .types
                    .has(
                      'text/plain'
                    ) ||
                    item
                      .types
                      .has(
                        'my-app-custom-type'
                      ))
              )
              .map(
                async (
                  item:
                    TextDropItem
                ) => {
                  if (
                    item
                      .types
                      .has(
                        'my-app-custom-type'
                      )
                  ) {
                    return JSON
                      .parse(
                        await item
                          .getText(
                            'my-app-custom-type'
                          )
                      );
                  } else {
                    return {
                      message:
                        await item
                          .getText(
                            'text/plain'
                          )
                    };
                  }
                }
              )
          );
      setDropped(items);
    }
  });

  let message = [
    'Drop here'
  ];
  if (dropped) {
    message = dropped
      .map((d) => {
        let message =
          d.message;
        if (
          d.style ===
            'bold'
        ) {
          message = (
            <strong>
              {message}
            </strong>
          );
        } else if (
          d.style ===
            'italic'
        ) {
          message = (
            <em>
              {message}
            </em>
          );
        }
        return (
          <div>
            {message}
          </div>
        );
      });
  }

  return (
    <div
      {...dropProps}
      role="button"
      tabIndex={0}
      ref={ref}
      className={`droppable ${
        isDropTarget
          ? 'target'
          : ''
      }`}
    >
      {message}
    </div>
  );
}

Drag data#

Data for a draggable element can be provided in multiple formats at once. This allows drop targets to choose data in a format that they understand. For example, you could serialize a complex object as JSON in a custom format for use within your own application, and also provide plain text and/or rich HTML fallbacks that can be used when a user drops data in an external application (e.g. an email message).

This can be done by returning multiple keys for an item from the getItems function. Types can either be a standard mime type for interoperability with external applications, or a custom string for use within your own app.

In addition to providing items in multiple formats, you can also return multiple drag items from getItems to transfer multiple objects in a single drag operation.

This example drags two items, each of which contains representations as plain text, HTML, and a custom app-specific data format. Dropping on the drop targets in this page will use the custom data format to render formatted items. If you drop in an external application supporting rich text, the HTML representation will be used. Dropping in a text editor will use the plain text format.

function Draggable() {
  let {dragProps, isDragging} = useDrag({
    getItems() {
      return [{
        'text/plain': 'hello world',
        'text/html': '<strong>hello world</strong>',
        'my-app-custom-type': JSON.stringify({
          message: 'hello world',
          style: 'bold'
        })
      }, {
        'text/plain': 'foo bar',
        'text/html': '<em>foo bar</em>',
        'my-app-custom-type': JSON.stringify({
          message: 'foo bar',
          style: 'italic'
        })
      }];
    }
  });

  // ...
  
}

function Draggable() {
  let {dragProps, isDragging} = useDrag({
    getItems() {
      return [{
        'text/plain': 'hello world',
        'text/html': '<strong>hello world</strong>',
        'my-app-custom-type': JSON.stringify({
          message: 'hello world',
          style: 'bold'
        })
      }, {
        'text/plain': 'foo bar',
        'text/html': '<em>foo bar</em>',
        'my-app-custom-type': JSON.stringify({
          message: 'foo bar',
          style: 'italic'
        })
      }];
    }
  });

  // ...
  
}

function Draggable() {
  let {
    dragProps,
    isDragging
  } = useDrag({
    getItems() {
      return [{
        'text/plain':
          'hello world',
        'text/html':
          '<strong>hello world</strong>',
        'my-app-custom-type':
          JSON.stringify(
            {
              message:
                'hello world',
              style:
                'bold'
            }
          )
      }, {
        'text/plain':
          'foo bar',
        'text/html':
          '<em>foo bar</em>',
        'my-app-custom-type':
          JSON.stringify(
            {
              message:
                'foo bar',
              style:
                'italic'
            }
          )
      }];
    }
  });

  // ...
}

Drag previews#

By default, the drag preview shown under the user's pointer or finger is a copy of the original element that started the drag. A custom preview can be rendered using the <DragPreview> component. This accepts a function as a child which receives the dragged data that was returned by getItems, and returns a rendered preview for those items. The DragPreview is linked with useDrag via a ref, passed to the preview property. The DragPreview should be placed in the component hierarchy appropriately, so that it receives any React context or inherited styles that it needs to render correctly.

This example renders a custom drag preview which shows the text of the first drag item.

import {DragPreview} from 'react-aria';

function Draggable() {
  let preview = React.useRef(null);  let { dragProps, isDragging } = useDrag({
    preview,    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    }
  });

  return (
    <>
      <div
        {...dragProps}
        role="button"
        tabIndex={0}
        className={`draggable ${isDragging ? 'dragging' : ''}`}
      >
        Drag me
      </div>
      <DragPreview ref={preview}>
        {(items) => (
          <div style={{ background: 'green', color: 'white' }}>
            {items[0]['text/plain']}
          </div>
        )}
      </DragPreview>    </>
  );
}

<Draggable />
<DropTarget />

import {DragPreview} from 'react-aria';

function Draggable() {
  let preview = React.useRef(null);  let { dragProps, isDragging } = useDrag({
    preview,    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    }
  });

  return (
    <>
      <div
        {...dragProps}
        role="button"
        tabIndex={0}
        className={`draggable ${
          isDragging ? 'dragging' : ''
        }`}
      >
        Drag me
      </div>
      <DragPreview ref={preview}>
        {(items) => (
          <div
            style={{ background: 'green', color: 'white' }}
          >
            {items[0]['text/plain']}
          </div>
        )}
      </DragPreview>    </>
  );
}

<Draggable />
<DropTarget />

import {DragPreview} from 'react-aria';

function Draggable() {
  let preview = React
    .useRef(null);  let {
    dragProps,
    isDragging
  } = useDrag({
    preview,    getItems() {
      return [{
        'text/plain':
          'hello world'
      }];
    }
  });

  return (
    <>
      <div
        {...dragProps}
        role="button"
        tabIndex={0}
        className={`draggable ${
          isDragging
            ? 'dragging'
            : ''
        }`}
      >
        Drag me
      </div>
      <DragPreview
        ref={preview}
      >
        {(items) => (
          <div
            style={{
              background:
                'green',
              color:
                'white'
            }}
          >
            {items[0][
              'text/plain'
            ]}
          </div>
        )}
      </DragPreview>    </>
  );
}

<Draggable />
<DropTarget />

Drop operations#

A DropOperation is an indication of what will happen when dragged data is dropped on a particular drop target. These are:

move – indicates that the dragged data will be moved from its source location to the target location.
copy – indicates that the dragged data will be copied to the target destination.
link – indicates that there will be a relationship established between the source and target locations.
cancel – indicates that the drag and drop operation will be canceled, resulting in no changes made to the source or target.

Many operating systems display these in the form of a cursor change, e.g. a plus sign to indicate a copy operation. The user may also be able to use a modifier key to choose which drop operation to perform, such as Option or Alt to switch from move to copy.

The onDragEnd event allows the drag source to respond when a drag that it initiated ends, either because it was dropped or because it was canceled by the user. The dropOperation property of the event object indicates the operation that was performed. For example, when data is moved, the UI could be updated to reflect this change by removing the original dragged element.

This example removes the draggable element from the UI when a move operation is completed. Try holding the Option or Alt keys to change the operation to copy, and see how the behavior changes.

function Draggable() {
  let [moved, setMoved] = React.useState(false);
  let {dragProps, isDragging} = useDrag({
    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    },
    onDragEnd(e) {
      if (e.dropOperation === 'move') {
        setMoved(true);
      }
    }  });

  if (moved) {
    return null;
  }

  // ...
  
}

function Draggable() {
  let [moved, setMoved] = React.useState(false);
  let {dragProps, isDragging} = useDrag({
    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    },
    onDragEnd(e) {
      if (e.dropOperation === 'move') {
        setMoved(true);
      }
    }  });

  if (moved) {
    return null;
  }

  // ...
  
}

function Draggable() {
  let [moved, setMoved] =
    React.useState(
      false
    );
  let {
    dragProps,
    isDragging
  } = useDrag({
    getItems() {
      return [{
        'text/plain':
          'hello world'
      }];
    },
    onDragEnd(e) {
      if (
        e.dropOperation ===
          'move'
      ) {
        setMoved(true);
      }
    }  });

  if (moved) {
    return null;
  }

  // ...
}

The drag source can also control which drop operations are allowed for the data. For example, if moving data is not allowed, and only copying is supported, the getAllowedDropOperations function could be implemented to indicate this. When you drag the element below, the cursor now shows the copy affordance by default, and pressing a modifier to switch drop operations results in the drop being canceled.

function Draggable() {
  let {dragProps, isDragging} = useDrag({
    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    },
    getAllowedDropOperations() {
      return ['copy'];
    }  });

  // ...
  
}

function Draggable() {
  let {dragProps, isDragging} = useDrag({
    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    },
    getAllowedDropOperations() {
      return ['copy'];
    }  });

  // ...
  
}

function Draggable() {
  let {
    dragProps,
    isDragging
  } = useDrag({
    getItems() {
      return [{
        'text/plain':
          'hello world'
      }];
    },
    getAllowedDropOperations() {
      return ['copy'];
    }  });

  // ...
}

Drag button#

In cases where a draggable element has other interactions that conflict with accessible drag and drop (e.g. Enter key), or if the element is not focusable, an explicit drag affordance can be added. This acts as a button that keyboard and screen reader users can use to activate drag and drop.

When the hasDragButton option is enabled, the keyboard interactions are moved from the returned dragProps to the dragButtonProps so that they can be applied to a separate element, while the mouse and touch dragging interactions remain in dragProps.

import {useButton} from 'react-aria';

function Draggable() {
  let { dragProps, dragButtonProps, isDragging } = useDrag({
    hasDragButton: true,    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    }
  });

  let ref = React.useRef(null);
  let { buttonProps } = useButton(
    { ...dragButtonProps, elementType: 'div' },
    ref
  );
  return (
    <div
      {...dragProps}
      className={`draggable ${isDragging ? 'dragging' : ''}`}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}
    >
      <span
        {...buttonProps}
        aria-label="Drag"
        ref={ref}
        style={{ fontSize: 18 }}
      >
        ≡
      </span>      <span>Some text</span>
      <button onClick={() => alert('action')}>Action</button>
    </div>
  );
}

<Draggable />
<DropTarget />

import {useButton} from 'react-aria';

function Draggable() {
  let { dragProps, dragButtonProps, isDragging } = useDrag({
    hasDragButton: true,    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    }
  });

  let ref = React.useRef(null);
  let { buttonProps } = useButton({
    ...dragButtonProps,
    elementType: 'div'
  }, ref);
  return (
    <div
      {...dragProps}
      className={`draggable ${
        isDragging ? 'dragging' : ''
      }`}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 5
      }}
    >
      <span
        {...buttonProps}
        aria-label="Drag"
        ref={ref}
        style={{ fontSize: 18 }}
      >
        ≡
      </span>      <span>Some text</span>
      <button onClick={() => alert('action')}>
        Action
      </button>
    </div>
  );
}

<Draggable />
<DropTarget />

import {useButton} from 'react-aria';

function Draggable() {
  let {
    dragProps,
    dragButtonProps,
    isDragging
  } = useDrag({
    hasDragButton: true,    getItems() {
      return [{
        'text/plain':
          'hello world'
      }];
    }
  });

  let ref = React.useRef(
    null
  );
  let { buttonProps } =
    useButton({
      ...dragButtonProps,
      elementType: 'div'
    }, ref);
  return (
    <div
      {...dragProps}
      className={`draggable ${
        isDragging
          ? 'dragging'
          : ''
      }`}
      style={{
        display:
          'inline-flex',
        alignItems:
          'center',
        gap: 5
      }}
    >
      <span
        {...buttonProps}
        aria-label="Drag"
        ref={ref}
        style={{
          fontSize: 18
        }}
      >
        ≡
      </span>      <span>
        Some text
      </span>
      <button
        onClick={() =>
          alert(
            'action'
          )}
      >
        Action
      </button>
    </div>
  );
}

<Draggable />
<DropTarget />

Disabling dragging#

If you need to temporarily disable dragging, you can pass the isDisabled option to useDrag. This will prevent dragging an element until it is re-enabled.

import {useDrag} from 'react-aria';

function Draggable() {
  let { dragProps, isDragging } = useDrag({
    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    },
    isDisabled: true  });

  return (
    <div
      {...dragProps}
      role="button"
      tabIndex={0}
      className={`draggable ${isDragging ? 'dragging' : ''}`}
    >
      Drag me
    </div>
  );
}

<Draggable />

import {useDrag} from 'react-aria';

function Draggable() {
  let { dragProps, isDragging } = useDrag({
    getItems() {
      return [{
        'text/plain': 'hello world'
      }];
    },
    isDisabled: true  });

  return (
    <div
      {...dragProps}
      role="button"
      tabIndex={0}
      className={`draggable ${
        isDragging ? 'dragging' : ''
      }`}
    >
      Drag me
    </div>
  );
}

<Draggable />

import {useDrag} from 'react-aria';

function Draggable() {
  let {
    dragProps,
    isDragging
  } = useDrag({
    getItems() {
      return [{
        'text/plain':
          'hello world'
      }];
    },
    isDisabled: true  });

  return (
    <div
      {...dragProps}
      role="button"
      tabIndex={0}
      className={`draggable ${
        isDragging
          ? 'dragging'
          : ''
      }`}
    >
      Drag me
    </div>
  );
}

<Draggable />

Name	Type	Description
`getItems`	`() => DragItem[]`	A function that returns the items being dragged.
`onDragStart`	`( (e: DragStartEvent )) => void`	Handler that is called when a drag operation is started.
`onDragMove`	`( (e: DragMoveEvent )) => void`	Handler that is called when the drag is moved.
`onDragEnd`	`( (e: DragEndEvent )) => void`	Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation.
`preview`	`RefObject<DragPreviewRenderer \| null>`	The ref of the element that will be rendered as the drag preview while dragging.
`getAllowedDropOperations`	`() => DropOperation[]`	Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed.
`hasDragButton`	`boolean`	Whether the item has an explicit focusable drag affordance to initiate accessible drag and drop mode. If true, the dragProps will omit these event handlers, and they will be applied to dragButtonProps instead.
`isDisabled`	`boolean`	Whether the drag operation is disabled. If true, the element will not be draggable.

Name	Type	Description
`type`	`'dragstart'`	The event type.
`x`	`number`	The x coordinate of the event, relative to the target element.
`y`	`number`	The y coordinate of the event, relative to the target element.

Name	Type	Description
`type`	`'dragmove'`	The event type.
`x`	`number`	The x coordinate of the event, relative to the target element.
`y`	`number`	The y coordinate of the event, relative to the target element.

Name	Type	Description
`type`	`'dragend'`	The event type.
`dropOperation`	`DropOperation`	The drop operation that occurred.
`x`	`number`	The x coordinate of the event, relative to the target element.
`y`	`number`	The y coordinate of the event, relative to the target element.

'copy'
  | 'link'
  | 'move'
  | 'cancel'

Name	Type	Description
`type`	`string`

(
  (items: DragItem[],
  , callback: (
    (node: HTMLElement
  )) => void
)) => void

Name	Type	Description
`dragProps`	`HTMLAttributes<HTMLElement>`	Props for the draggable element.
`dragButtonProps`	`AriaButtonProps`	Props for the explicit drag button affordance, if any.
`isDragging`	`boolean`	Whether the element is currently being dragged.

Name	Type	Default	Description
`isDisabled`	`boolean`	—	Whether the button is disabled.
`children`	`ReactNode`	—	The content to display in the button.
`onPress`	`( (e: PressEvent )) => void`	—	Handler that is called when the press is released over the target.
`onPressStart`	`( (e: PressEvent )) => void`	—	Handler that is called when a press interaction starts.
`onPressEnd`	`( (e: PressEvent )) => void`	—	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
`onPressChange`	`( (isPressed: boolean )) => void`	—	Handler that is called when the press state changes.
`onPressUp`	`( (e: PressEvent )) => void`	—	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
`autoFocus`	`boolean`	—	Whether the element should receive focus on render.
`onFocus`	`( (e: FocusEvent<Target> )) => void`	—	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent<Target> )) => void`	—	Handler that is called when the element loses focus.
`onFocusChange`	`( (isFocused: boolean )) => void`	—	Handler that is called when the element's focus status changes.
`onKeyDown`	`( (e: KeyboardEvent )) => void`	—	Handler that is called when a key is pressed.
`onKeyUp`	`( (e: KeyboardEvent )) => void`	—	Handler that is called when a key is released.
`href`	`string`	—	A URL to link to if elementType="a".
`target`	`string`	—	The target window for the link.
`rel`	`string`	—	The relationship between the linked resource and the current page. See MDN.
`elementType`	`ElementType \| JSXElementConstructor<any>`	`'button'`	The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.
`aria-expanded`	`boolean \| 'true' \| 'false'`	—	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`aria-haspopup`	`boolean \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog' \| 'true' \| 'false'`	—	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`aria-controls`	`string`	—	Identifies the element (or elements) whose contents or presence are controlled by the current element.
`aria-pressed`	`boolean \| 'true' \| 'false' \| 'mixed'`	—	Indicates the current "pressed" state of toggle buttons.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	The behavior of the button when used in an HTML form.
`excludeFromTabOrder`	`boolean`	—	Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
`id`	`string`	—	The element's unique identifier. See MDN.
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.

Properties

Name	Type	Description
`type`	`'pressstart' \| 'pressend' \| 'pressup' \| 'press'`	The type of press event being fired.
`pointerType`	`PointerType`	The pointer type that triggered the press event.
`target`	`Element`	The target element of the press event.
`shiftKey`	`boolean`	Whether the shift keyboard modifier was held during the press event.
`ctrlKey`	`boolean`	Whether the ctrl keyboard modifier was held during the press event.
`metaKey`	`boolean`	Whether the meta keyboard modifier was held during the press event.
`altKey`	`boolean`	Whether the alt keyboard modifier was held during the press event.
`x`	`number`	X position relative to the target.
`y`	`number`	Y position relative to the target.

Methods

Method	Description
`continuePropagation(): void`	By default, press events stop propagation to parent elements. In cases where a handler decides not to handle a specific event, it can call `continuePropagation()` to allow a parent to handle it.

'mouse'
  | 'pen'
  | 'touch'
  | 'keyboard'
  | 'virtual'

BaseEvent<ReactKeyboardEvent<any>>

SyntheticEvent & {stopPropagation: () => void,
continuePropagation: () => void
}