SEED Design

Skeleton

콘텐츠가 로딩 중임을 나타내는 플레이스홀더 컴포넌트입니다. 실제 콘텐츠의 구조를 미리 보여줌으로써 더 나은 로딩 경험을 제공합니다.

import { Skeleton, VStack } from "@seed-design/react";

export default function SkeletonPreview() {
  return (
    <VStack gap="x4" align="center">
      <Skeleton radius="full" width="x12" height="x12" />
      <VStack direction="column" gap="x2">
        <Skeleton radius="8" height="x4" width="250px" />
        <Skeleton radius="8" height="x4" width="250px" />
      </VStack>
    </VStack>
  );
}

Usage

import { Skeleton } from "@seed-design/react";
<Skeleton />

Props

Prop

Type

Examples

Radius

import { Flex, Skeleton } from "@seed-design/react";

export default function SkeletonRadius() {
  return (
    <Flex gap="x4" align="center">
      <Skeleton radius="0" width="x12" height="x12" />
      <Skeleton radius="8" width="x12" height="x12" />
      <Skeleton radius="16" width="x12" height="x12" />
      <Skeleton radius="full" width="x12" height="x12" />
    </Flex>
  );
}

Tone

import { Box, Skeleton, VStack } from "@seed-design/react";

export default function SkeletonTone() {
  return (
    <VStack gap="x4" alignItems="flex-start" width="full">
      <Skeleton tone="neutral" radius="16" width="full" height="x12" />
      <Skeleton tone="magic" radius="16" width="full" height="x12" />
    </VStack>
  );
}

Last updated on

On this page

Usage
Props
Examples
Radius
Tone