SEED Design

Skeleton

콘텐츠가 로딩되는 동안 이후 나타날 요소의 윤곽을 미리 보여주어 로딩 시간을 짧게 느끼게 하는 UI 요소입니다.

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