Cursors

Cursors (커서)

상호작용 요소에 사용되는 커서를 커스터마이징하는 방법을 다뤄요.

출처: 문서

기본 커서 (Default cursors)

기본적으로, 다른 페이지로 연결되지 않는 상호작용 요소는 일반 화살표 커서를 사용해요. 이는 브라우저 기본값과도 일치해요. 다만 비활성화된 요소는 명시적으로 disabled 커서를 사용해요.

<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 변수로 접근할 수 있어요. 이 토큰들을 사용해 커스텀 컴포넌트를 스타일링하면, 테마의 나머지 부분과 접근성 있고 일관된 모습을 유지할 수 있어요.

/* 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의 커서는 토큰 시스템의 대응 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 Themes 스타일보다 나중에 적용되어 우선순위를 가지도록 해야 해요.

더 알아보기 (Learn more)

• 커서 토큰을 바꾸면 기본 동작을 유지하면서도 원하는 커서로 전역적으로 교체할 수 있어요.