아이콘 버튼
닫기·더보기처럼 아이콘 하나만 있는 가벼운 버튼이에요. 폰에서는 누르는 칸이 44px로 커져요.
고르기#
- 이 이름은 버튼(Button)에 합쳤어요. 모양은 그대로이고, 새로 쓸 때는 정본을 써요.
버튼 문서 보기 →
사용 예제#
할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.
못 누르게 하기#
해부도#
- 1
컨테이너
누르는 칸이에요. PC 32px, 폰 44px 정사각형이에요.
- 2
아이콘
16px 선 아이콘 하나예요.
속성#
인터페이스#
타입에서 자동으로 뽑은 표예요.
IconBtn#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| onClick | - | () => void | 누르면 불러요. |
| title | - | string | 마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요. |
| label | - | string | 화면 읽기 프로그램이 읽는 이름(aria-label)이에요. |
| disabled | - | boolean | 못 누르게 하고 40%로 흐려요. |
| className주의 | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| children* | - | ReactNode | 안에 그릴 내용이에요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
스펙#
상태 · 슬롯마다 실제로 그려지는 값이에요.
접근성#
가이드라인#
이렇게 써요#
쓰는 규칙#
이렇게 써요
- label(aria-label)을 반드시 줘요.
- 아이콘은 lucide 16px(size-4)을 써요.
이렇게 하지 않아요
- 중요한 주 동작을 아이콘 버튼만으로 두지 않아요.
문구#
- label은 일어날 일을 적어요("관심 단지에서 빼기").
- 켜짐·꺼짐에 따라 label도 바꿔요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |
| Pleos개발 중 | 차량 앱의 IconAction(공개 저장소)로 따로 구현했어요. 원형 아이콘 버튼 - 누르는 칸 80dp, 아이콘 40dp. 누르는 칸 80dp · 아이콘 40dp |