버튼
제품의 모든 버튼은 Button 하나에서 나와요 - 채움·테두리, 도구줄(variant="toolbar"), 원형(iconOnly shape="pill").
플랫폼
폰 브라우저·홈 화면 앱(767px 이하)고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 누르면 무언가 일어나는 모든 버튼 - 채움·테두리·도구줄·원형·아이콘만(variant="ghost" iconOnly)까지.
사용 예제#
할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.
값 바꿔 보기#
해부도#
- 1
컨테이너
눌리는 면 전체예요. 모서리·여백·배경을 가져요.
- 2
아이콘
선택이에요. 라벨 앞에 와요.
- 3
라벨
일어날 일을 동사로 적어요.
속성#
인터페이스#
타입에서 자동으로 뽑은 표예요.
Button#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| onClick | - | () => void | 누르면 불러요. |
| title | - | string | 마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요. |
| label | - | string | 화면 읽기 프로그램이 읽는 이름(aria-label)이에요. |
| disabled | - | boolean | 못 누르게 하고 40%로 흐려요. |
| className주의 | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| type | 'button' | 'button' | 'submit' | HTML 버튼 종류예요. |
| variant | 'primary' | BtnVariant | 모양이에요. |
| size | 'md' | BtnSize | 크기예요. |
| shape | 'rounded' | BtnShape | |
| icon | - | ReactNode | 라벨 앞에 놓을 아이콘이에요. |
| iconOnly | - | boolean | |
| href | - | string | 링크 모드 - 이동이면 href. 안쪽 주소는 next/link, external이면 새 탭 <a>. 클릭 셈(track)·미리 당기기가 필요하면 DetailLink + buttonClass. |
| external | - | boolean | |
| children | - | ReactNode | 안에 그릴 내용이에요. |
| on | - | boolean | 도구줄·원형(variant="toolbar" · iconOnly shape="pill")만 - on=켜짐(brand-soft) · done=잠깐 체크(복사·내려받기처럼 화면이 안 바뀌는 동작) |
| done | - | boolean | 끝난 동작을 아이콘 체크로 잠깐 보여 줘요. |
| doneIcon | - | ReactNode | done일 때 쓸 아이콘이에요(기본 체크). |
| btnRef | - | ((instance: HTMLButtonElement | null) => void | (() => void | { [UNDEFINED_VOID_ONLY]: n… | 버튼 요소의 ref예요. |
| pressed | - | boolean | 켜고 끄는 단추(iconOnly ghost·soft)의 눌림 상태 → aria-pressed(예: 자동 넘김 멈춤). 모양은 그대로 |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
스펙#
상태 · 슬롯마다 실제로 그려지는 값이에요.
Button#
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 간격 | 6px |
| 굵기 | 700 | ||
| 전환 대상 | 색·눌림 크기 | ||
| pressed | root | 크기 배율 | 0.97 |
| 크기 배율(기본) | 0.975 · 버튼 공통 규칙 | ||
| disabled | root | 포인터 | 받지 않음 |
| 투명도 | 40% |
variant=primary
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 배경색 | brand-fill |
| 글자색 | on-brand | ||
| hover | root | 배경색 | brand-strong |
variant=ghost
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 글자색 | dim |
| hover | root | 배경색 | hover |
| 글자색 | ink |
variant=soft
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 배경색 | chip |
| 글자색 | sub | ||
| hover | root | 배경색 | hover |
variant=toolbar
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 글자색 | dim |
| hover | root | 배경색 | hover |
| 글자색 | ink |
값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.
접근성#
가이드라인#
언제 쓰나요#
- 화면에서 가장 중요한 동작 하나에 primary를 써요.
- 같은 줄의 보조 동작에는 outline을 써요.
- 표·카드 위 도구줄처럼 여러 개가 나란히 놓일 때는 variant="toolbar"를 써요.
- 표 머리처럼 글자를 붙일 수 없는 자리에는 iconOnly shape="pill"(원형)을 써요.
이렇게 써요#
쓰는 규칙#
이렇게 써요
- 한 화면에 primary는 하나만 둬요.
- 라벨은 일어날 일을 동사로 적어요("조건 초기화").
- 누르면 0.97배로 줄어드는 눌림은 버튼이 스스로 가져요.
이렇게 하지 않아요
- 넓은 행 전체에 눌림(scale)을 걸지 않아요 - 안쪽 버튼이 손가락 밑에서 밀려 안 눌려요.
- primary 두 개를 나란히 두지 않아요.
- text-white를 따로 덮어쓰지 않아요 - 색은 BTN이 정해요.
문구#
- 일어날 일을 동사로 적어요("조건 초기화").
- 물음표·느낌표를 붙이지 않아요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | 767px 이하에서 누르는 칸과 여백이 커져요(손가락 기준). |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |
| Pleos개발 중 | 차량 앱의 CarButton(공개 저장소)로 따로 구현했어요. 굵기 대신 크기·색으로 위계를 줘요. 주 버튼만 브랜드 색이에요. 누르면 95%로 줄어요(웹은 97%). 높이 L 100dp · M 80dp · 모서리 L 32dp · M 24dp · 최소 폭 L 240dp · M 160dp |