package.docs.utilities.cursors.mdx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of core Show documentation

Premium and Open Source dashboard template with responsive and high quality UI.

The newest version!

---
title: Cursors
description: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.
---

## Cursor utilities

Use one of the available cursor utilities depending on the action you want to indicate.

- `.cursor-auto`- the cursor style depends on what's inside a given element
- `.cursor-pointer` - a pointing cursor, used to show that an element is clickable
- `.cursor-move` - a cursor which shows that a given element can be moved
- `.cursor-not-allowed` - a cursor which shows that a user is not allowed to perform an action on an element
- `.cursor-zoom-in` - a cursor which shows that a user can zoom in
- `.cursor-zoom-out` - a cursor which shows that a user can zoom out
- `.cursor-default` - the default cursor
- `.cursor-none` - no cursor
- `.cursor-help` - a cursor which shows that help information is available
- `.cursor-progress` - a cursor which shows that an action is in progress
- `.cursor-wait` - a cursor which shows that a user cannot interact with the element because it is busy
- `.cursor-text` - a cursor which shows that a user can type
- `.cursor-v-text` - a cursor which shows that a user can type in a vertical text input
- `.cursor-grab` - a cursor which shows that a user can grab an element
- `.cursor-grabbing` - a cursor which shows that a user is grabbing an element

```html example background="white" height="20rem" vcentered

  
    auto
  
  
    pointer
  
  
    move
  
  
    not-allowed
  
  
    zoom-in
  
  
    zoom-out
  
  
    default
  
  
    none
  
  
    help
  
  
    progress
  
  
    wait
  
  
    text
  
  
    vertical-text
  
  
    grab
  
  
    grabbing
  

```

```html
auto
pointer
move
not-allowed
zoom-in
zoom-out
default
none
help
progress
wait
text
vertical-text
grab
grabbing
```