IconButton

아이콘 하나만 있는 투명한 둥근 버튼이다. 헤더의 "뒤로", "검색"에 쓴다.

이 페이지의 목차

미리보기
언제 쓰는가
종류
크기
상태
사용 방법
속성(props)
치수와 토큰
접근성
잘한 예와 잘못한 예
함께 보는 컴포넌트

분류: 버튼
가져오기: import { IconButton } from '@/ui/Button'
코드 위치: apps/mobile/src/ui/Button.tsx:112

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

검색

닫기

삭제

언제 쓰는가#

쓴다

헤더의 뒤로 가기, 검색, 북마크처럼 뜻이 널리 알려진 아이콘 행동에 쓴다.
label에 행동 이름을 반드시 쓴다.

쓰지 않는다

처음 보는 아이콘에 쓰지 않는다. 글자가 있는 버튼을 쓴다.
배경색이 필요한 버튼에 쓰지 않는다. 배경이 없다.

종류#

종류가 없다. 안에 들어가는 아이콘은 사용하는 쪽이 넣는다.

크기#

IconButton 크기
이름	값	설명
기본	40 × 40	크기를 바꾸는 속성이 없다. `hitSlop` 10으로 누르는 영역은 60×60이 된다.

상태#

기본

누름

IconButton 상태
상태	모습과 동작
기본	투명 배경. 아이콘만 보인다.
누름	투명도 0.6.
비활성	비활성 표현이 없다.

사용 방법#

헤더의 검색 버튼

import { IconButton } from '@/ui/Button';
import { Search } from '@/ui/icons';

<IconButton label="검색" onPress={() => router.push('/search')}>
  <Search size={22} color={color.text} strokeWidth={2.2} />
</IconButton>

속성(props)#

IconButton 속성
이름	타입	기본값	필수	설명
`onPress`	() => void	—	선택	누르면 실행할 함수.
`children`	ReactNode	—	필수	버튼 안에 그릴 아이콘.
`label`	string	—	필수	화면 읽기 프로그램이 읽는 이름. 필수.
`style`	StyleProp<ViewStyle>	—	선택	위치를 맞출 때만 쓴다. 예: 헤더 가장자리에 맞추려고 `marginLeft: -10`.

치수와 토큰#

크기: 40 × 40, 모서리 20(원)
아이콘: 22px, 선 두께 2.2, 색 text
누르는 영역: hitSlop 사방 10

접근성#

역할은 button이고 이름은 label이다. 이름이 없으면 화면 읽기 프로그램이 "버튼"이라고만 읽는다.
앱은 터치 화면이라 마우스 올림(hover)과 키보드 포커스 표시가 없다. 웹에서 같은 모양을 만들 때는 포커스 링(2.5px 실선, 바깥쪽 3px 띄움)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.

잘한 예와 잘못한 예#

잘한 예이름(label)과 아이콘 뜻이 같다.

IconButton children={<Search />} (label 없음)

잘못한 예label 없이 쓰지 않는다. 시각 장애가 있는 사용자는 이 버튼의 뜻을 알 수 없다.

BackHeader: 화면 위쪽의 뒤로 가기 줄이다. 왼쪽에 뒤로 화살표, 가운데에 제목(선택), 오른쪽에 행동 자리가 있다.
TitleHeader: 탭의 첫 화면 위쪽에 놓는 큰 제목 줄이다. 왼쪽에 제목, 오른쪽에 행동 자리가 있다.