컴포넌트
Status Dot
온라인/자리비움/오프라인/바쁨 상태를 색과 맥동 링으로 표시하는 인디케이터. 라벨 옵션, 크기 프리셋, 펄스 강제 토글을 지원하며 모션 감소 설정을 존중한다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/StatusDot-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| status | "online" | "away" | "offline" | "busy" | "online" | 표시할 상태. 상태에 따라 색상과 기본 라벨, 맥동 여부가 결정된다. |
| label | string | 상태별 기본 라벨 | 라벨 텍스트. 미지정 시 상태별 기본 라벨(온라인/자리비움 등)을 사용한다. |
| showLabel | boolean | true | 라벨 텍스트 표시 여부. |
| size | "sm" | "md" | "lg" | "md" | 점 크기 프리셋 (8/11/15px). |
| pulse | boolean | 상태 정의를 따름 | 맥동 링 강제 on/off. 미지정 시 상태 정의를 따르며, 모션 감소 설정 시 항상 꺼진다. |
| className | string | "" | 추가 CSS 클래스명. |