스피너
짧은 액션이나 작은 영역의 진행 중 상태를 나타내는 회전 표시다. 페이지나 카드 전체처럼 콘텐츠 구조가 예측되는 로딩은 Skeleton 을 쓰고, 버튼 제출처럼 짧고 국소적인 진행 상태는 Spinner 를 쓴다.
상태
sm
md
lg
활용 방법
버튼 내부
진행 중인 액션의 버튼 라벨 옆에 둔다.
Preview
tsx
<Button disabled icon={<Spinner size="sm" tone="primary" />}>저장 중</Button>
독립 표시
작은 영역 중앙에 단독으로 둘 수 있다.
Preview
tsx
<Spinner tone="primary" label="불러오는 중" />
사용 지침
- · 짧은 액션 로딩에 쓴다.
- · 콘텐츠 영역 로딩은 Skeleton 을 쓴다.
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | 크기 |
| tone | "muted" | "primary" | "inverse" | "muted" | 색상 톤 |
| label | string | "로딩 중" | 접근성 라벨 |