피드백 / skeleton

Skeleton

콘텐츠 도착 전 자리를 차지하는 placeholder — shimmer 로딩 시각.

피드백skeletonInteractiveskeleton스켈레톤placeholderloading

Workbench 불러오는 중…

Component intent의도와 경계 읽기

LLM 스트리밍 응답·표·카드·메시지가 도착하기 전 그 자리를 미리 점유해 layout shift 를 막는다. variant 로 모양(text=1em 라인 / circle=정원 아바타 / rect=기본 카드·이미지)을 고르고, width/height 로 크기를 지정한다(number 는 px 자동 변환, string 은 그대로). shimmer 는 ::after transform sweep(compositor-only)이며 aria-hidden 이라 스크린리더에 노출되지 않는다. ToolCallCard 의 pending 자리 동반 시각.

01텍스트 라인 여러 줄tsxfragment

import { Skeleton } from "@axe/ui";export function Example() {  return (    <>      <Skeleton variant="text" width="80%" />      <Skeleton variant="text" width="60%" />    </>  );}

02아바타 + 카드 자리tsxfragment

import { Skeleton } from "@axe/ui";export function Example() {  return (    <>      <Skeleton variant="circle" width={40} />      <Skeleton variant="rect" width="100%" height={120} />    </>  );}

03CSS-only (비-React)htmlfragment

<div class="axe-skeleton axe-skeleton--text" role="presentation"     aria-hidden="true" style="width: 80%"></div><div class="axe-skeleton axe-skeleton--circle" role="presentation"     aria-hidden="true" style="width: 40px"></div>

이름	타입	필수	기본값	설명
`variant`	`"text" \| "circle" \| "rect"`	—	`"rect"`	모양. text=1em 라인(radius-sm) · circle=정원(aspect 1/1) · rect=기본 사각.
`width`	`number \| string`	—	—	너비. number 면 px 로 변환, string 이면 그대로(예 "60%"). 인라인 style 로 적용.
`height`	`number \| string`	—	—	높이. number 면 px, string 이면 그대로. text variant 는 미지정 시 1em.
`...rest`	`React.HTMLAttributes<HTMLDivElement>`	—	—	className 병합, style 은 width/height 뒤에 전개되어 덮어쓸 수 있고, 나머지는 루트 div 로 전파.

클래스	안정성	용도
`.axe-skeleton`	stable	루트 div — subtle 배경·radius-md·overflow hidden, ::after shimmer sweep.
`.axe-skeleton--text`	stable	text 변형 — height 1em·radius-sm(라인 모양).
`.axe-skeleton--circle`	stable	circle 변형 — 완전 원(radius 9999·aspect 1/1).
`.axe-skeleton--rect`	stable	rect 변형(기본) — 별도 규칙 없는 마커, width/height 로 크기 지정.

비-React 소비 노트

순수 CSS 로 재현 가능 — .axe-skeleton + variant 클래스에 인라인 width/height, role="presentation" aria-hidden="true" 를 직접 부여한다. 스타일(indicators.css)은 components.css 가 @import 하므로 별도 로드 불요.

권장

실제 콘텐츠와 비슷한 폭/높이로 잡아 layout shift 를 없앤다.
text 라인은 폭을 조금씩 다르게 줘 실제 텍스트처럼 보이게 한다.

지양

장식용 무한 shimmer 로 남겨두지 말 것 — 콘텐츠가 오면 즉시 교체.
정보 전달용 요소를 skeleton 으로 대체하지 말 것(aria-hidden 이라 SR 에 안 읽힌다).

Skeleton

먼저 보고, 그다음 계약을 읽습니다

예제

Props

.axe-* 클래스 계약

권장 · 지양