カーソル

インタラクティブな要素に使用されるカーソルをカスタマイズします。

デフォルトのカーソル

デフォルトでは、別のページにリンクしないインタラクティブな要素は、通常の矢印カーソルを使用します。これはブラウザのデフォルトにも一致します。ただし、無効になっている要素は、明示的に無効カーソルを使用します。

リンク

<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>

カーソルトークン

カーソル設定は、CSS変数を使用してアクセスできます。これらのトークンを使用して、カスタムコンポーネントをスタイリングし、アクセシビリティを確保し、テーマの他の部分との一貫性を保つことができます。

/* 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);

カスタマイズ

インタラクティブな要素にポインターカーソルを使用するのが一般的です。Radix Themesのカーソルは、トークンシステムの対応する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;
}

Radix Themesのスタイルが適用された後にCSSが適用され、優先されるようにしてください。

前へシャドウ

次へボックス

GitHubでこのページを編集する。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

カーソル

デフォルトのカーソル

カーソルトークン

カスタマイズ