컴포넌트FOX · Button

버튼

누르면 무언가 일어나는 단추예요. 채움, 톤, 외곽선, 글자 네 단계로 위계를 나누고, 되돌리기 어려운 행동은 빨간 글자로 따로 표시해요.

종류

한 화면에 주 버튼은 하나만 둬요. 나머지 행동은 한 단계씩 약한 버튼으로 내려요.

VARIANTS

<Button variant="primary">시작하기</Button>
<Button variant="tonal">미리 보기</Button>
<Button variant="outlined">취소</Button>
<Button variant="text">나중에 하기</Button>
<Button variant="danger">삭제</Button>

크기

lg는 화면 아래 고정 버튼, md는 본문 안, sm은 카드나 목록 줄 안에 써요.

SIZES

<Button size="lg">다음</Button>
<Button size="md">다음</Button>
<Button size="sm">다음</Button>

상태

마우스를 올리면 그림자가 커지며 떠오르고, 누르면 그림자가 사라지며 눌려 들어가요.

STATES

기본

불러오는 중

꺼짐

아이콘과 함께

꽉 찬 버튼

모바일 화면 맨 아래 주 행동은 폭을 꽉 채워요.

BLOCK

<Button size="lg" block>확인했어요</Button>

아이콘 버튼

아이콘만 있는 버튼이에요. 그림이 작아도 누르는 영역은 44px을 지키고, 화면 읽기 도구가 읽을 이름을 꼭 넣어요.

ICON BUTTON

<IconButton label="닫기"><CloseIcon /></IconButton>
<IconButton label="닫기" appearance="plain"><CloseIcon /></IconButton>

이렇게 써요

이렇게주 버튼은 하나, 오른쪽에 둬요. 취소는 외곽선 버튼으로 약하게.

이렇게 말고주 버튼 두 개를 나란히 두면 무엇을 눌러야 할지 몰라요.

속성

속성	값	기본값	설명
`variant`	"primary" \| "tonal" \| "outlined" \| "text" \| "danger"	`primary`	버튼의 위계
`size`	"lg" \| "md" \| "sm"	`md`	높이 52, 44, 32px
`block`	boolean	`false`	부모 폭을 꽉 채운다
`icon`	ReactNode	없음	글자 앞 아이콘(18px)
`loading`	boolean	`false`	돌아가는 표시를 띄우고 누르지 못하게 한다
`disabled`	boolean	`false`	누를 수 없는 상태

속성	값	기본값	설명
`label`	string	없음	IconButton 필수. 화면 읽기 도구와 마우스 설명에 쓴다
`appearance`	"framed" \| "plain"	`framed`	테두리 네모 또는 아이콘만
`size`	"lg" \| "md" \| "sm"	`md`	52, 44, 32px 정사각형