커서 토큰
커서 토큰 (Cursors)
대화형 요소에 사용하는 커서 토큰에 대해 알아봐요. cursor 토큰을 활용해 버튼, 체크박스, 슬라이더 등 요소별 커서를 일관되게 설정할 수 있어요.
출처: 문서
본문
개요 (Overview)
Chakra UI는 대화형 요소의 커서를 정의할 때 cursor 토큰을 사용해요.
커서 토큰 (Cursor Tokens)
Chakra에서 대화형 요소의 커서를 커스터마이징하려면 원하는 cursor 토큰 값을 설정해요.
사용 가능한 커서 토큰 목록은 다음과 같아요.
- button: 버튼용 커서
- checkbox: 체크박스와 체크박스 카드용 커서
- disabled: 비활성 요소용 커서
- menuitem: 메뉴 아이템과 메뉴 옵션 아이템용 커서
- option: select, combobox, listbox 옵션용 커서
- radio: 라디오와 라디오 카드용 커서
- slider: 슬라이더 트랙과 썸 상호작용용 커서
- switch: 스위치용 커서
커서 커스터마이징 (Customizing Cursors)
예를 들어 버튼 커서를 바꾸려면 button 토큰 값을 default로 설정할 수 있어요.
import { createSystem, defaultConfig } from "@chakra-ui/react"
export const system = createSystem(defaultConfig, {
theme: {
tokens: {
cursor: {
button: { value: "pointer" },
},
},
},
})