AXIS
Components/Skeleton

Skeleton

콘텐츠 로딩 상태를 표시하는 플레이스홀더 컴포넌트입니다.

Installation

bash
npx axis-cli add skeleton

Usage

tsx
import { Skeleton } from '@axis-ds/ui-react'

export function Example() {
  return <Skeleton className="h-4 w-[250px]" />
}

Basic

Card Loading

tsx
// 카드 로딩 상태
<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

Table Loading

tsx
// 테이블 로딩 상태
<div className="space-y-3">
  <Skeleton className="h-8 w-full" />
  <Skeleton className="h-8 w-full" />
  <Skeleton className="h-8 w-full" />
</div>

Complex Layout

Props

className
Type:string
Default:-

크기 및 모양을 지정하는 CSS 클래스

Accessibility

콘텐츠 로딩 중 표시되는 장식적 플레이스홀더입니다.

  • 스켈레톤 자체는 장식이므로 보조기술에서 숨기고, 로딩 영역에 aria-busy="true"를 적용하세요.
  • 로딩 완료 시 실제 콘텐츠로 교체해 상태 변화를 알리세요.