# Cursors

## Overview

Chakra UI uses the `cursor` token to define the cursor for interactive elements.

| Cursor Token | Value         | Example                   |
| ------------ | ------------- | ------------------------- |
| `button`     | `pointer`     | <Box cursor="button" />   |
| `checkbox`   | `default`     | <Box cursor="checkbox" /> |
| `disabled`   | `not-allowed` | <Box cursor="disabled" /> |
| `menuitem`   | `default`     | <Box cursor="menuitem" /> |
| `option`     | `default`     | <Box cursor="option" />   |
| `radio`      | `default`     | <Box cursor="radio" />    |
| `slider`     | `default`     | <Box cursor="slider" />   |
| `switch`     | `pointer`     | <Box cursor="switch" />   |

## Cursor Tokens

To customize the cursor for interactive elements in Chakra, set the desired
`cursor` token values.

Here's a list of the available cursor tokens:

- **button**: Cursors for buttons
- **checkbox**: Cursors for checkbox and checkbox card
- **disabled**: Cursors for disabled elements
- **menuitem**: Cursors for menu item and menu option items.
- **option**: Cursors for select, combobox and listbox options
- **radio**: Cursors for radio and radio cards
- **slider**: Cursors for slider track and thumb interaction
- **switch**: Cursors for switch

## Customizing Cursors

Here's an example of how to change the cursor for a button, you can set the
`button` token to `default`.

```tsx
import { createSystem, defaultConfig } from "@chakra-ui/react"

export const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      cursor: {
        button: { value: "pointer" },
      },
    },
  },
})
```