Button

클릭 가능한 기본 액션 트리거. variant·size 조합을 제공합니다.

데모

코드

<Button>저장하기</Button>
<Button variant="outline">취소</Button>
<Button variant="secondary">임시저장</Button>
<Button variant="ghost">더 보기</Button>
<Button variant="destructive">계정 삭제</Button>
<Button variant="link">자세히 보기</Button>
<Button size="sm">
  <FloppyDiskIcon size={14} weight="regular" />
  저장
</Button>
<Button disabled>처리 중</Button>

사용 규칙

Do

주요 액션 하나에는 variant='default'만 사용해 시각적 위계를 유지한다.
파괴적 액션(삭제 등)은 variant='destructive'로 명확히 구분한다.
아이콘만 있는 버튼은 size='icon' 계열과 aria-label을 함께 쓴다.

Don't

한 화면에 default variant 버튼을 여러 개 나란히 두지 않는다.
버튼 배경색을 className으로 직접 덮어써 토큰 체계를 깨지 않는다.
disabled 버튼에 클릭 유도 문구(지금 바로!)를 쓰지 않는다.