Cursor

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "cursor"; export const description = "Utilities for controlling the cursor style when hovering over an element.";

)", "cursor: var(\);"], ["cursor-[\]", "cursor: \;"], ]} />

Examples

Basic example

Use utilities like cursor-pointer and cursor-grab to control which cursor is displayed when hovering over an element:

{

Submit Saving... Confirm

}

<!-- [!code classes:cursor-pointer,cursor-progress,cursor-not-allowed] -->
<button class="cursor-pointer ...">Submit</button>
<button class="cursor-progress ...">Saving...</button>
<button class="cursor-not-allowed ..." disabled>Confirm</button>

Using a custom value

Responsive design