Components

Empty State

데이터가 없는 상태 — 이유와 다음 행동을 안내합니다.

◇

아직 에이전트가 없습니다

첫 에이전트를 만들면 여기에 표시됩니다.

코드 보기

<div class="tn-empty">
  <div class="ei">◇</div>
  <div class="et">아직 에이전트가 없습니다</div>
  <div class="es">첫 에이전트를 만들면 여기에 표시됩니다.</div>
  <button class="tn-btn tn-btn-primary">에이전트 만들기</button>
</div>

Variants

이름	설명	미리보기
첫 사용	다음 행동 버튼 포함	◇ 아직 없습니다
검색 결과 없음	버튼 없이 문구만	"보이스"에 대한 결과가 없습니다
오류	Callout err로 대체 — Empty State 아님	불러오기 실패

Guidelines

✓ Do

상태 한 줄 + 이유/안내 한 줄 + (가능하면) 행동 1개
아이콘은 단색 심플

✕ Don't

일러스트·이모지 금지
"텅 비었어요~" 류 구어체 금지

Specification

속성	토큰/값	비고
`아이콘 박스`	`44px / 12px / --muted`
`제목`	`0.95rem / 600`