Button

누르면 동작을 실행해요. 저장하기, 게시하기, 지우기처럼 화면 안에서 일어나는 동작에 써요. 다른 페이지로 이동할 때는 링크를 써요.

사용 예시

주 동작

화면에서 가장 중요한 동작 하나만 solid로 두고, 나머지는 outline이나 ghost로 둬요.

tsx

<Button color="brand" emphasis="solid">저장하기</Button><Button color="neutral" emphasis="outline">지우기</Button>

권장

solid 버튼이 하나라 어디를 눌러야 할지 바로 보여요.

지양

둘 다 solid면 주된 동작을 알아보기 어려워요.

아이콘과 글자

아이콘을 글자 앞에 두면 동작을 빨리 알아볼 수 있어요. 아이콘 크기는 버튼의 size를 따라서 따로 적지 않아요.

tsx

<Button color="brand" emphasis="solid">  <Download />  내려받기</Button><Button color="neutral" emphasis="outline">  <Copy />  복사</Button><Button color="neutral" emphasis="ghost">  <RotateCcw />  되돌리기</Button>

아이콘만

공간이 좁을 때 써요.

tsx

<Button color="neutral" emphasis="ghost" shape="square" aria-label="복사">  <Copy /></Button><Button color="neutral" emphasis="outline" shape="square" aria-label="내려받기">  <Download /></Button>

tsx

<Button  color="neutral"  emphasis="ghost"  shape="square"  aria-label="복사">  <Copy /></Button>

권장

글자가 없는 버튼은 aria-label로 이름을 줘요. 스크린 리더가 이 이름을 읽어요.

tsx

<Button  color="neutral"  emphasis="ghost"  shape="square">  <Copy /></Button>

지양

이름이 없으면 스크린 리더는 버튼이라고만 읽어요. 두 버튼은 화면에서 똑같이 보여요.

pill

tsx

<Button color="neutral" emphasis="outline" shape="pill">현 위치에서 검색</Button><Button color="brand" emphasis="solid" shape="pill">새 글 32개</Button>

원형

tsx

<Button color="brand" emphasis="solid" shape="circle" aria-label="글쓰기">  <Plus /></Button><Button color="neutral" emphasis="outline" shape="circle" aria-label="닫기">  <X /></Button>

되돌릴 수 없는 동작

danger는 지우기처럼 되돌릴 수 없는 동작에만 써요. 한 화면에 하나예요.

tsx

<Button color="neutral" emphasis="outline">그대로 두기</Button><Button color="danger" emphasis="solid">기록 지우기</Button>

Input 옆

옆에 있는 컨트롤과 size를 맞춰요. Input이 lg면 버튼도 lg예요.

tsx

<div className="flex gap-2">  <Input value={comment} onChange={e => setComment(e.target.value)} placeholder="댓글을 남기세요" />  <Button color="brand" emphasis="solid">게시</Button></div><div className="flex gap-2">  <Input value={comment} onChange={e => setComment(e.target.value)} size="lg" placeholder="댓글을 남기세요" />  <Button color="brand" emphasis="solid" size="lg">게시</Button></div>

권장

높이가 같아서 위아래 끝이 맞아요.

지양

높이가 달라서 위아래 끝이 어긋나요.

비활성

처리 중이거나 확인 문구를 입력하기 전에만 비활성으로 둬요. 조건이 맞지 않을 때는 누를 수 있게 두고 이유를 알려요.

tsx

<Button color="neutral" emphasis="solid" disabled>저장하기</Button><Button color="neutral" emphasis="outline" disabled>지우기</Button><Button color="danger" emphasis="outline" disabled>기록 지우기</Button>

유형

색과 강조

색 3가지와 강조 4가지를 조합해요. 크기와 모양은 컨트롤에서 바꿔 보세요.

solid

weak

outline

ghost

컨트롤

color

emphasis

size

shape

disabled

tsx

<Button color="neutral" emphasis="outline">저장하기</Button>

명세

이름
이름	값	기본
color	brand, neutral, danger	필수
동작의 성격에 맞춰 골라요.
emphasis	solid, weak, outline, ghost	필수
앞에 적힌 값일수록 눈에 띄어요.
size	sm, md, lg	md
높이가 32, 36, 40px이에요.
shape	rect, square, pill, circle	rect
square와 circle은 아이콘 하나에만 써요.
disabled	boolean	false
className	string	-