Components
IconButton
IconButton은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다.
Import
import { IconButton } from '@vapor-ui/core';Preview
<IconButton> <HeartIcon /> </IconButton>
Props
IconButton
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
color | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'contrast' | 'primary' | 아이콘 버튼의 주 색상(의미)을 설정합니다. |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 버튼 및 아이콘의 크기를 설정합니다. |
variant | 'fill' | 'outline' | 'ghost' | 'fill' | 버튼의 스타일 변형을 선택합니다. |
rounded | boolean | false | true일 경우 버튼이 완전히 원형이 됩니다. |
disabled | boolean | false | 버튼을 비활성화합니다. |
aria-label | string | - | 화면 읽기 전용 사용자에게 아이콘 버튼의 용도를 설명하는 텍스트입니다. 가시적 레이블이 없으므로 필수입니다. |
Accessibility Table
IconButton WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다. Vapor IconButton은 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.
개발 시 준수해야 할 내용을 명시합니다.
| Props | Description |
|---|---|
| aria-label | 버튼의 기능을 설명하는 접근 가능한 이름을 제공해야 합니다. 아이콘 버튼의 경우, 아이콘의 모양이 아닌 기능을 간결하게 설명해야 합니다. |
<IconButton aria-label="편집 버튼"> <EditIcon /> </IconButton> | |
컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.
| Accessibility | Description |
|---|---|
| aria-hidden | 아이콘은 주로 장식적 요소이므로, aria-hidden="true"를 사용하여 스크린 리더가 이를 읽지 않도록 하여 불필요한 정보 전달을 방지하도록 합니다. |