IconButton

좁은 곳에서도 누르기 쉬운, 아이콘만 있는 버튼.

개요

미리보기

예시 언어동작 줄이기

icon

label

variant

size

togglepresseddisabledloading

이렇게 aria-label은 필수이고 행동을 동사로 말한다(“닫기”, “비밀번호 보기”). 뜻이 널리 알려진 아이콘에만 쓰고, 그렇지 않으면 글자 Button을 쓴다. 조작 영역은 44px 이상이다.
이렇게 누구나 아는 아이콘에만 쓴다(닫기, 추가, 더보기). 애매하면 라벨 있는 Button.
이렇게 하지 않기 툴팁으로 이름을 대신하지 않는다. label이 이름이다.
이렇게 하지 않기 토글할 때 이름을 바꾸지 않는다(“보기”↔“숨기기” 금지). aria-pressed만 바뀐다.

이름	타입	기본값	설명
`icon`	`ReactNode`	`plus`	장식 아이콘(aria-hidden). 뜻은 label이 전한다.
`label`	`string`	`추가`	접근 이름(aria-label). 타입에서 필수. 토글이어도 이름은 바뀌지 않는다.
`variant?`	`'secondary' \| 'quiet'`	`quiet`	quiet는 배경 없음, secondary는 면과 테두리.
`size?`	`'sm' \| 'md'`	`md`	보이는 36 / 44px. 누르는 영역은 항상 44px.
`toggle?`	`boolean`	`false`	토글 버튼으로 만든다(aria-pressed를 그린다).
`pressed?`	`boolean`	`false`	토글 상태. toggle이 켜져 있을 때만 쓴다. 채움과 테두리로 보인다.
`disabled?`	`boolean`	`false`	실제 disabled. 이유는 근처 텍스트로(툴팁 금지).
`loading?`	`boolean`	`false`	Button과 같은 규칙: aria-busy, 다시 눌러도 실행 안 함, 초점 유지.
`ref`	—	—	ref는 <button>으로 전달된다(Menu 트리거·초점 복귀).
그 밖의 속성	—	—	type(기본 "button"), onClick, name, value, aria-controls, aria-expanded 등 네이티브 button 속성은 그대로 전달된다. aria-label은 label로만, aria-pressed는 toggle·pressed로만. className·style은 받지 않는다.

예시

이렇게 · 이렇게 하지 않기

이렇게 aria-label은 필수이고 행동을 동사로 말한다(“닫기”, “비밀번호 보기”). 뜻이 널리 알려진 아이콘에만 쓰고, 그렇지 않으면 글자 Button을 쓴다. 조작 영역은 44px 이상이다.

이렇게 누구나 아는 아이콘에만 쓴다(닫기, 추가, 더보기). 애매하면 라벨 있는 Button.

이렇게 하지 않기 툴팁으로 이름을 대신하지 않는다. label이 이름이다.

이렇게 하지 않기 토글할 때 이름을 바꾸지 않는다(“보기”↔“숨기기” 금지). aria-pressed만 바뀐다.

토큰과 속성

이름	타입	기본값	설명
`icon`	`ReactNode`	`plus`	장식 아이콘(aria-hidden). 뜻은 label이 전한다.
`label`	`string`	`추가`	접근 이름(aria-label). 타입에서 필수. 토글이어도 이름은 바뀌지 않는다.
`variant?`	`'secondary' \| 'quiet'`	`quiet`	quiet는 배경 없음, secondary는 면과 테두리.
`size?`	`'sm' \| 'md'`	`md`	보이는 36 / 44px. 누르는 영역은 항상 44px.
`toggle?`	`boolean`	`false`	토글 버튼으로 만든다(aria-pressed를 그린다).
`pressed?`	`boolean`	`false`	토글 상태. toggle이 켜져 있을 때만 쓴다. 채움과 테두리로 보인다.
`disabled?`	`boolean`	`false`	실제 disabled. 이유는 근처 텍스트로(툴팁 금지).
`loading?`	`boolean`	`false`	Button과 같은 규칙: aria-busy, 다시 눌러도 실행 안 함, 초점 유지.
`ref`	—	—	ref는 <button>으로 전달된다(Menu 트리거·초점 복귀).
그 밖의 속성	—	—	type(기본 "button"), onClick, name, value, aria-controls, aria-expanded 등 네이티브 button 속성은 그대로 전달된다. aria-label은 label로만, aria-pressed는 toggle·pressed로만. className·style은 받지 않는다.