Cursors

Overview

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

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.

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

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