SEED Design

Error State

사용자에게 오류 혹은 조회 결과가 없음을 알리는 컴포넌트입니다.

import { VStack } from "@seed-design/react";
import { ErrorState } from "seed-design/ui/error-state";

export default function ErrorStatePreview() {
  return (
    <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutralMuted">
      <ErrorState
        title="에러 타이틀"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
        primaryActionProps={{
          children: "메인 액션",
        }}
        secondaryActionProps={{
          children: "보조 액션",
        }}
      />
    </VStack>
  );
}

Installation

npx @seed-design/cli@latest add error-state

Props

Prop

Type

Examples

Basement

layer-basement 배경 위에서는 basement variant를 사용합니다.

import { VStack } from "@seed-design/react";
import { ErrorState } from "seed-design/ui/error-state";

export default function ErrorStateBasement() {
  return (
    <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutralMuted">
      <ErrorState
        variant="basement"
        title="에러 타이틀"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
        primaryActionProps={{
          children: "메인 액션",
        }}
        secondaryActionProps={{
          children: "보조 액션",
        }}
      />
    </VStack>
  );
}

Last updated on

On this page

Installation
Props
Examples
Basement