Guides

光标

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

默认光标

默认情况下,不链接到其他页面的互动元素使用常规箭头光标。这也与浏览器的默认设置相匹配。然而,禁用的元素则使用显式的禁用光标。

链接
链接
<Flex align="center" gap="4" wrap="wrap">
<Flex align="center" gap="3" wrap="wrap">
<Button>按钮</Button>
<Button asChild>
<a href="#">链接</a>
</Button>
<Button disabled>禁用</Button>
</Flex>
<Button variant="ghost">幽灵按钮</Button>
<Link href="#" size="2">
链接
</Link>
<Checkbox defaultChecked />
<Switch defaultChecked />
<Switch defaultChecked disabled />
</Flex>

光标令牌

光标设置可以通过 CSS 变量访问。您可以使用这些令牌来为您的自定义组件设置样式,确保它们可访问且与主题的其他部分一致。

/* 可用的光标令牌 */
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);

自定义

通常,对于互动元素使用指针光标。Radix 主题的光标可以通过覆盖令牌系统的相应 CSS 变量进行自定义。

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

.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 主题样式之后应用,以便它具备优先权。

下一篇盒子 Box