Components

Button

주 행동을 수행하는 기본 인터랙션 컴포넌트입니다.

코드 보기

<button class="tn-btn tn-btn-primary">전송</button>
<button class="tn-btn tn-btn-ghost">취소</button>

Variants

이름	설명	미리보기
Primary	주 행동. 검정 배경 → hover 시 파랑 + 1px 상승 + 그림자
Ghost	보조 행동. 테두리형 → hover 시 파랑 테두리
Disabled	opacity 0.45 + cursor not-allowed

Guidelines

✓ Do

화면당 Primary는 1개만 둔다
레이블은 명사형 동작으로 짧게 (전송, 확인, 저장)
위험 행동은 Ghost + 에러색 텍스트로

✕ Don't

파랑을 기본 배경으로 쓰지 않는다 — 파랑은 hover의 보상
레이블에 문장·이모지 금지 ("전송해 보세요!")
Primary 두 개를 나란히 두지 않는다

Specification

속성	토큰/값	비고
`배경`	`var(--foreground)`	기본 상태 (검정)
`배경:hover`	`var(--primary)`	+ translateY(-1px)
`radius`	`var(--radius-btn) = 6px`
`타이포`	`0.85rem / 600`
`전환`	`var(--ts)`	0.4s spring

비교

Button vs Chip — 누르면 무언가 일어나야 하면 Button, 상태·라벨을 보여주면 Chip. 헷갈리면 "동사인가?"로 판정.