Error State
사용자에게 오류 혹은 조회 결과가 없음을 알리는 컴포넌트입니다.
에러 타이틀Lorem ipsum dolor sit amet consectetur adipisicing elit.
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.neutral">
<ErrorState
title="에러 타이틀"
description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
primaryActionProps={{
children: "메인 액션",
}}
secondaryActionProps={{
children: "보조 액션",
}}
/>
</VStack>
);
}Installation
npx @seed-design/cli@latest add error-statepnpm dlx @seed-design/cli@latest add error-stateyarn dlx @seed-design/cli@latest add error-statebun x @seed-design/cli@latest add error-stateProps
| Prop | Type | Default |
|---|---|---|
variant? | "default" | "basement" | "default" |
secondaryActionProps? | ButtonHTMLAttributes<HTMLButtonElement> | - |
primaryActionProps? | ActionButtonProps | - |
description? | ReactNode | - |
title? | ReactNode | - |
Examples
Basement
layer-basement 배경 위에서는 basement variant를 사용합니다.
에러 타이틀Lorem ipsum dolor sit amet consectetur adipisicing elit.
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.neutral">
<ErrorState
variant="basement"
title="에러 타이틀"
description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
primaryActionProps={{
children: "메인 액션",
}}
secondaryActionProps={{
children: "보조 액션",
}}
/>
</VStack>
);
}Last updated on