Loader

버튼 안이나 영역의 짧은 대기 표시.

개요

미리보기

예시 언어동작 줄이기

size

layout

labelHidden

label

decorativeimmediate

이름	타입	기본값	설명
`size?`	`'sm' \| 'md'`	`md`	sm은 글자 크기(버튼·행 안), md는 24px(영역). 큰 스피너는 없다. 영역 로딩은 Skeleton.
`layout?`	`'inline' \| 'stacked'`	`inline`	inline은 라벨 옆, stacked는 라벨 위(영역 가운데).
`labelHidden?`	`boolean`	`false`	라벨을 보조기기에만 둔다. 동작 줄이기에서는 정지 아이콘과 함께 라벨을 보인다.
`label?`	`ReactNode`		무엇을 기다리는지 말한다(“기록을 불러오는 중”). 비우면 “불러오는 중”.
`decorative?`	`boolean`	`false`	버튼 등 바쁜 컨트롤 안에서 쓴다. role 없이 aria-hidden이고, 의미는 컨트롤의 aria-busy가 맡는다.
`immediate?`	`boolean`	`false`	300ms 표시 지연을 건너뛴다(카탈로그·테스트용). 실제 대기는 지연을 두어 짧은 대기에 깜빡이지 않게 한다.
그 밖의 속성	—	—	className·style은 받지 않는다. 나머지 네이티브 속성은 바깥 요소로 전달된다.

예시

이렇게 · 이렇게 하지 않기

이렇게 1초 남짓 짧은 대기에만 쓰고, 내용이 들어올 자리는 Skeleton으로 보여준다.

이렇게 동작 줄이기 설정에서는 정지 아이콘과 문구로 바꾼다. 의미는 글자로 남는다.

이렇게 하지 않기 점·막대·로고 회전 같은 변형을 만들지 않는다. 스피너는 하나다. 브랜드 마크를 돌리지 않는다.

이렇게 하지 않기 보조기기에 “불러오는 중”을 반복해 알리지 않는다. 한 번이면 된다.

토큰과 속성

이름	타입	기본값	설명
`size?`	`'sm' \| 'md'`	`md`	sm은 글자 크기(버튼·행 안), md는 24px(영역). 큰 스피너는 없다. 영역 로딩은 Skeleton.
`layout?`	`'inline' \| 'stacked'`	`inline`	inline은 라벨 옆, stacked는 라벨 위(영역 가운데).
`labelHidden?`	`boolean`	`false`	라벨을 보조기기에만 둔다. 동작 줄이기에서는 정지 아이콘과 함께 라벨을 보인다.
`label?`	`ReactNode`		무엇을 기다리는지 말한다(“기록을 불러오는 중”). 비우면 “불러오는 중”.
`decorative?`	`boolean`	`false`	버튼 등 바쁜 컨트롤 안에서 쓴다. role 없이 aria-hidden이고, 의미는 컨트롤의 aria-busy가 맡는다.
`immediate?`	`boolean`	`false`	300ms 표시 지연을 건너뛴다(카탈로그·테스트용). 실제 대기는 지연을 두어 짧은 대기에 깜빡이지 않게 한다.
그 밖의 속성	—	—	className·style은 받지 않는다. 나머지 네이티브 속성은 바깥 요소로 전달된다.