컴포넌트FOX · Empty

빈 화면

보여 줄 내용이 아직 없을 때 쓰는 화면이에요. 왜 비었는지 알려 주고, 다음에 할 수 있는 일이 있으면 버튼 하나로 이어 줘요.

기본

먹색 선으로 그린 작은 네모 그림, 제목, 설명 순서예요.

BASIC

송금하거나 받으면 여기에 쌓여요.

<Empty title="아직 내역이 없어요" description="송금하거나 받으면 여기에 쌓여요." />

할 수 있는 일이 있으면 버튼을 하나만 붙여요. 그림은 상황에 맞게 바꿀 수 있어요.

WITH ACTION

다른 말로 다시 찾아볼까요?

<Empty
  illustration={<SearchIcon />}
  title="찾는 결과가 없어요"
  description="다른 말로 다시 찾아볼까요?"
  action={<Button variant="outlined">다시 찾기</Button>}
/>

이벤트에 참여하면 쿠폰이 도착해요.

이렇게왜 비었는지 말하고, 다음에 무엇을 하면 되는지 알려 줘요.

이렇게 말고상태만 적으면 고객이 무엇을 해야 할지 몰라요.