Web - IconButton

제출용 버튼입니다. 업로드용 버튼은 Web - UploadIconButton 문서 참고

Definition

정의	IconButton
최적화 대상	Desktop Mobile
기획 배포	완료
디자인 가이드 배포	완료
개발 코드 배포	완료

Principle

아이콘으로만 이루어진 버튼 형태를 말합니다.

Shadow를 가지는 경우, Contents Layer에 포함되는 요소이기 때문에 elevation-2으로 설정합니다. (Elevations and Shadows 문서 참고)

*아이콘과 베이스 영역 중앙 정렬합니다.

Spec

Size

baseSize와 iconSize를 조합하여 사용합니다.

baseSize
터치영역이 되는 사이즈를 말합니다.

종류	baseSize (터치영역)	권장하는 iconSize
XXlarge	96px	72
Large	48px	20, 24
Medium	40px	16, 20
Small	32px	16, 20
XSmall	24px	12

iconSize
아이콘 사이즈는 경우에 따라 다양한 사이즈가 들어갈 수 있습니다. 이 부분은 각 쓰이는 곳마다 따로 기술해 놓습니다.

종류	size
12px	12
16px	16
20px	20
24px	24
72px	72

Color 구성

Color Key

버튼에는 다양한 상태들이 존재합니다. 버튼을 구성하는 요소들의 컬러 변화로 상태들을 표현합니다.

예외로 fillType fill 일 때, base에 투명한 배경을 넣으면 액션에 따라 달라지지 않고 터치 영역의 역할만 하게끔 합니다.
(ListItem Pattern에서 ListItem 내 우측 화살표와 같은 애들일 경우)

fillType : Fill

baseColor(투명배경 키값) : ui_cpnt_button_fill_base_transparent
- 해당 경우에서 hover나 active에 대한 컬러 값이 부여되지 않도록 합니다.

	iconColor	baseColor
enabled	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_fill_base_primary`
hover	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_fill_on_base_hover` (`ui_cpnt_button_fill_base_primary` 위에 겹쳐짐)
pressed	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_fill_on_base_pressed` (`ui_cpnt_button_fill_base_primary` 위에 겹쳐짐)
disabled	`ui_cpnt_button_icon_disabled`	`ui_cpnt_button_fill_base_disabled`

fillType : Line

	iconColor	borderColor	baseColor
enabled	`ui_cpnt_button_icon_enabled`	`ui_cpnt_button_line_border_enabled`	`ui_cpnt_button_line_base_default`
hover	`ui_cpnt_button_icon_enabled`	`ui_cpnt_button_line_border_enabled`	`ui_cpnt_button_line_base_hover`
pressed	`ui_cpnt_button_icon_enabled`	`ui_cpnt_button_line_border_enabled`	`ui_cpnt_button_line_base_pressed`
disabled	`ui_cpnt_button_icon_disalbed`	`ui_cpnt_button_line_border_disabled`	`ui_cpnt_button_line_base_default`

Shadow

elevation-2

Properties

fillType

디자인 표현이 선형인지, 면인지를 의미합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'fill'`

Enum Values Description
`'fill'`	면형으로 표현되는 버튼 fillType
`'line'`	선형으로 표현되는 버튼 linetype

shapeType

버튼의 외관 형태를 결정합니다. *배경에 컬러가 들어가는 경우, circular로 설정

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'rectangle'`

Enum Values Description
`'rectangle'`	직사각형 형태의 shapeType
`'circular'`	원형 형태의 shapeType

baseSize

버튼의 크기를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'small'`

Enum Values Description
`'xxlarge'`	96px
`'large'`	48px
`'medium'`	40px
`'small'`	32px
`'xsmall'`	24px

baseColorKey

배경에 투명값을 넣으면 액션에 따라 변화는 없지만 터치 영역의 역할을 수행

배경 컬러를 결정합니다. (ui_로 정의된 컬러값) *fillType이 fill일 경우에만 적용 (fillType이 line일 땐 무시)

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'ui_cpnt_icon_sys_grey_01'`

Enum Values Description
정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

borderColorKey

현재는 사용하지 않습니다.

라인의 컬러를 결정합니다. (ui_로 정의된 컬러값) *fillType이 fill일 경우에만 적용 (fillType이 line일 땐 무시)

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'ui_cpnt_icon_sys_grey_01'`

Enum Values Description
정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

iconFillType

아이콘의 형태를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'line'`

Enum Values Description
`'line'`	line 형태의 아이콘을 사용합니다.
`'fill'`	fill 형태의 아이콘을 사용합니다.

iconSize

아이콘의 크기를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`24`

Enum Values Description
`12`
`16`
`20`
`24`
`48`
`72`

iconName*

아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	-

Enum Values Description
Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

iconColorKey

아이콘 컬러를 설정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	-

Enum Values Description
정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

state

Added in 1.2

버튼의 상태를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태 입니다.
`'disabled'`	비활성화 상태입니다.

shadow

그림자 유무를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'hidden'`

Enum Values Description
`'hidden'`	그림자 없음
`'visible'`	그림자 표시

colorTheme

컬러의 프리셋 테마입니다. *현재는 fillType이 line일 경우에만 적용(fillType이 fill일 땐 무시), 추후 fill1이라는 value가 나온다면 이건 fillType이 fill일 때만 적용한다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	기본값 사용
`'line1'`	CODE `{ border-color: ui_cpnt_button_line_border_error; icon-color: ui_cpnt_button_icon_error; }`
`'line2'`	CODE `{ border-color: ui_cpnt_button_line_border_primary; icon-color: ui_cpnt_button_icon_primary; }`

type

Added in 1.2.3

button 태그 자체의 type을 결정합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`enum`
Default	`'button'`

Enum Values Description
`'button'`	기본적인 버튼의 역할을 합니다.
`'submit'`	form data를 제출하는 버튼의 역할을 합니다.
`'reset'`	form data를 초기 값으로 재설정하는 버튼의 역할을 합니다.

onClick

Added in 1.2.3

클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`(...args: any) => any`
Default	-

onMouseDown

Added in 1.2.3

클릭이 된 시점에 이벤트를 부여합니다.

onClick보다 빠른 시점에 발현됩니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`(...args: any) => any`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/03/24 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : Property 기술방법 변경 - 김혜진
2022/01/27 : state prop 추가 - 김혜진
2022/01/07 : baseSize, iconSize에 대한 value 추가 - 김혜진
2022/01/03 : 컬러와 관련한 prop 설명 문구 추가(fillType에 따른 적용범위) - 김혜진
2021/11/26 : fillType line일 때 spec 내 브랜드 컬러에 대한 값 삭제 - 김혜진
2021/11/16 : iconFillType에 대한 prop 추가, border에 대한 spec, prop 추가 - 김혜진
2021/10/25 : Spec 수정 - 김혜진
2021/10/07 : Spec, Property 내용 수정 - 김혜진
2021/09/29 : 전반적인 내용 업데이트 - 김혜진
2021/09/10 : Property 및 Values 업데이트 - 박윤규
2021/09/08 : 문서 초안 작성 - 김혜진