光标

¥Cursors

自定义用于交互元素的光标。

默认游标

¥Default cursors

默认情况下，不链接到其他页面的交互元素使用常规箭头光标。这也与浏览器默认设置一致。但是，禁用的元素会使用显式禁用光标。

¥By default, interactive elements that don’t link to another page use the regular arrow cursor. This also matches the browser defaults. However, disabled elements use an explicit disabled cursor.

<Flex align="center" gap="4" wrap="wrap">
	<Flex align="center" gap="3" wrap="wrap">
		<Button>Button</Button>
		<Button asChild>
			<a href="#">Link</a>
		</Button>
		<Button disabled>Disabled</Button>
	</Flex>
	<Button variant="ghost">Ghost button</Button>
	<Link href="#" size="2">
		Link
	</Link>
	<Checkbox defaultChecked />
	<Switch defaultChecked />
	<Switch defaultChecked disabled />
</Flex>

光标标记

¥Cursor tokens

可以使用 CSS 变量访问光标设置。你可以使用这些令牌来设置自定义组件的样式，确保它们易于访问并与主题的其余部分保持一致。

¥Cursor settings can be accessed using CSS variables. You can use these tokens to style your custom components, ensuring they are accessible and consistent with the rest of your theme.

/* Available cursor tokens */
var(--cursor-button);
var(--cursor-checkbox);
var(--cursor-disabled);
var(--cursor-link);
var(--cursor-menu-item);
var(--cursor-radio);
var(--cursor-slider-thumb);
var(--cursor-slider-thumb-active);
var(--cursor-switch);

自定义

¥Customization

通常使用指针光标来表示交互元素。Radix Themes 的光标可以通过覆盖 token 系统相应的 CSS 变量进行自定义。

¥It’s common to use a pointer cursor for interactive elements. Radix Themes cursors can be customized by overriding the corresponding CSS variables of the token system.

以下是如何自定义光标标记以将主题中大多数交互元素设置为 cursor: pointer 的示例：

¥Here’s an example of how you can customize the cursor tokens to set cursor: pointer for most interactive elements in the theme:

.radix-themes {
	--cursor-button: pointer;
	--cursor-checkbox: pointer;
	--cursor-disabled: default;
	--cursor-link: pointer;
	--cursor-menu-item: pointer;
	--cursor-radio: pointer;
	--cursor-slider-thumb: grab;
	--cursor-slider-thumb-active: grabbing;
	--cursor-switch: pointer;
}

确保你的 CSS 在 Radix Themes 样式之后应用，以便其优先。

¥Make sure that your CSS is applied after the Radix Themes styles so that it takes precedence.