Cursors

Auto

The auto state is the common cursor state, where the system automatically determines which cursor to display based on the current context.

Examples:

• When hovered over text, the cursor changes to a text selection cursor.
• When placed over a clickable element, the cursor changes to a pointer.

None

This state is used when the cursor needs to be hidden.

For instance, the cursor might disappear while typing to reduce visual clutter. This is a common scenario in various text editors.

This cursor appears when a user hovers over text. It usually indicates that the user is allowed to interact with text (highlight, copy, insert text, ...).
The cursor direction depends on the text orientation. It can be used to select horizontal and vertical lines of text, respectively.

Text cursor

This cursor is used when users are allowed to select an area on the screen. This typically occurs when working with graphical tools (for example, to select part of an image or chart).

Crosshair cursor

Historically, this cursor was mainly used when hovering over links. However, it is now used when the mouse cursor is placed over any type of clickable element. Don’t use this cursor on non-interactive elements.

Pointer cursor

This cursor is used when users can adjust the size of an element by dragging a side or edge. There are two main groups of resize cursors based on their direction: unidirectional and bidirectional.

Resize cursors

These cursors are used when users can resize columns or rows in tables. The orientation depends on whether the resizing is applied to a column or a row:

• Resize column: Cursor displays with a vertical beam.
• Resize row: Cursor displays with a horizontal beam.

Column-resize and row-resize

Use this cursor when users can rearrange elements.

Both Windows and macOS use the same visual representation for the all-scroll cursor.

Move cursor

The grab cursor (open hand) is used to indicate that users can drag an item. When users “grab” the item by clicking, the cursor automatically changes to a closed hand to show that the item is being “held”.
Use this cursor to indicate that the hovered item can be dragged and repositioned.

Grab and grabbing

This cursor is used to indicate that dropping an item is not allowed in the current position.

‘Not allowed' in Windows (left) and macOS (right)

This cursor indicates that users can zoom in or out within a specific area on the screen, allowing them to adjust the view to show the desired level of detail.

Zoom in and zoom out

The following cursors are rarely used, but they can be a good solution in certain situations. Consider whether a specific cursor style would be beneficial for your use case.

This cursor is used to indicate that a copy of the item will be created after dropping it.

Copy in Windows (left) and macOS (right)

This cursor is used to indicate that dragging an item will create an alias or a shortcut.

Alias in Windows (left) and macOS (right)

“Progress” and “wait” cursors are rarely used in the SAP Design System. For situations where these cursors might be relevant, see the Busy Indicator guideline.

Alias in Windows (left) and macOS (right)

This cursor is used to indicate that in-app help is available. The help can either be displayed immediately (for example, as a tooltip), or require an additional action to be accessed.

Help in Windows (left) and macOS (right)

The context menu cursor is intended to help users discover context menus. This cursor CSS is available on macOS, but not on Windows.

To ensure consistency across different devices and operating systems, use of this cursor is not recommended.

Context menu cursor