Web - MainButton

정의

MainButton

최적화 대상

Desktop

Mobile

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

Purpose

가장 중요도가 높은 곳에 쓰이며, 사용자의 액션을 적극적으로 유도하는데 사용하는 버튼입니다.

• publ에서는 브랜드 컬러를 적용하여 강조하고 있습니다.
  

일반적으로 사용하는 기본 버튼입니다.

Fill 버튼 보다 낮은 주목성을 갖습니다. (중간 강조)

페이지 내 Fill 버튼이 있는 경우 보조 버튼으로 함께 사용할 수 있고, 한 페이지에 여러 개가 존재할 수 있습니다.

Variation

텍스트나 아이콘을 포함하고 있으며 아이콘은 옵션입니다.

• 아이콘을 사용할 경우 텍스트의 왼쪽에 배치해야하고, 우측에 배치할 수 있는 아이콘이 정해져 있습니다. (오른쪽 화살표, 외부링크 아이콘)

• Xmall 사이즈는 아이콘 옵션이 제공되지 않습니다.

텍스트나 아이콘을 포함하고 있으며 아이콘은 옵션입니다.

• 아이콘을 사용할 경우 텍스트의 왼쪽에 배치해야하고, 우측에 배치할 수 있는 아이콘이 정해져 있습니다. (오른쪽 화살표, 외부링크 아이콘)

• Xmall 사이즈는 아이콘 옵션이 제공되지 않습니다.

Large

(48px)

• 페이지 전체 영역에 영향을 주는 버튼입니다.

• 사용자의 행동을 유도하는 버튼(CTA 버튼)이므로 한 페이지에 하나만 존재해야 하고, 주로 콘텐츠 하단에 배치되어 있습니다.

• lineType와 함께 나란히 배치 될 수 있습니다. 이 때 우측에 놓여진 버튼이 가장 중요한 버튼이므로 fillType이 우측에, lineType이 좌측에 배치 됩니다.

• 높은 주목성을 가져야하기 때문에, publ에서는 브랜드 컬러를 적용하여 강조하고 있습니다.

• 특수한 경우가 아니라면, full-width(rlarge)로 배치하지 않습니다.

• 페이지 전체 영역에 영향을 주는 버튼입니다.

• 페이지 내 Fill 버튼이 있는 경우 보조 버튼으로 함께 사용할 수 있습니다.

• 원칙적으로 한 페이지에 여러 개가 존재할 수 있으나, 되도록 한 개만 배치할 것을 권장합니다.

• 특수한 경우가 아니라면, full-width(rlarge)로 배치하지 않습니다.

Medium

(40px)

• 모달 버튼으로 가장 중요한 액션일 경우에 사용합니다.

• Fill fillType는 중요도가 높을 때 사용하는 것이므로 여러 개 사용하지 않습니다.

• 모달 버튼으로 나머지 액션들에 사용합니다.

Small

(32px)

• 섹션 내 해당 섹션에 어떠한 액션을 제공할 때 사용합니다.

• 섹션마다 버튼이 다 제공될 수 있지만 Fill fillType는 중요도가 높을 때 사용하는 것이므로 한 페이지에 여러 개 사용하지 않습니다.

• 섹션 내 해당 섹션에 어떠한 액션을 제공할 때 사용합니다.

• 섹션마다 버튼이 다 제공될 수 있고, 한 페이지에 여러 개 사용할 수 있습니다.

• TextField 옆에 나란히 두거나 이미지나 영상을 업로드 하는 경우에 주로 쓰입니다.

XSmall

(24px)

Height

48px

40px

32px

24px

Width

min-width : 96px

min-width : 64px

min-width : 48px

min-width : 48px

radius

14px

12px

10px

8px

text

Web - TextLabel 참고

• styleTheme : body1Bold

• singleLineMode : use

Web - TextLabel 참고

• styleTheme : body2Bold

• singleLineMode : use

Web - TextLabel 참고

• styleTheme : caption1Bold

• singleLineMode : use

Web - TextLabel 참고

• styleTheme : caption1Regular

• singleLineMode : use

icon

• size : 20

• size : 16

• size : 16

N/A

enabled

Web - TextLabel 참고

• colorTheme : usrTextBrandOnPrimary

ui_cpnt_button_icon_on_primary

ui_cpnt_button_fill_base_primary

hover

Web - TextLabel 참고

• colorTheme : usrTextBrandOnPrimary

ui_cpnt_button_icon_on_primary

ui_cpnt_button_fill_on_base_hover (ui_cpnt_button_fill_base_primary 위에 겹쳐짐)

pressed

Web - TextLabel 참고

• colorTheme : usrTextBrandOnPrimary

ui_cpnt_button_icon_on_primary

ui_cpnt_button_fill_on_base_pressed (ui_cpnt_button_fill_base_primary 위에 겹쳐짐)

disabled

Web - TextLabel 참고

• colorTheme : sysTextTertiary

ui_cpnt_button_icon_disabled

ui_cpnt_button_fill_base_disabled

*hover, pressed 액션 없음

enabled

Web - TextLabel 참고

• colorTheme : usrTextBrandPrimary

ui_cpnt_button_icon_on_primary

ui_cpnt_button_fill_base_default

hover

Web - TextLabel 참고

• colorTheme : usrTextBrandPrimary

ui_cpnt_button_icon_on_primary

ui_cpnt_button_fill_on_base_hover (ui_cpnt_button_fill_base_default 위에 겹쳐짐)

pressed

Web - TextLabel 참고

• colorTheme : usrTextBrandPrimary

ui_cpnt_button_icon_on_primary

ui_cpnt_button_fill_on_base_pressed (ui_cpnt_button_fill_base_default 위에 겹쳐짐)

disabled

Web - TextLabel 참고

• colorTheme : sysTextTertiary

ui_cpnt_button_icon_disabled

ui_cpnt_button_fill_base_default

*hover, pressed 액션 없음

enabled

Web - TextLabel 참고

• colorTheme : sysTextPrimary

ui_cpnt_button_icon_enabled

ui_cpnt_button_line_border_enabled

ui_cpnt_button_line_base_default

hover

Web - TextLabel 참고

• colorTheme : sysTextPrimary

ui_cpnt_button_icon_enabled

ui_cpnt_button_line_border_enabled

ui_cpnt_button_line_base_hover

pressed

Web - TextLabel 참고

• colorTheme : sysTextPrimary

ui_cpnt_button_icon_enabled

ui_cpnt_button_line_border_enabled

ui_cpnt_button_line_base_pressed

disabled

Web - TextLabel

• colorTheme : sysTextTertiary

ui_cpnt_button_icon_disalbed

ui_cpnt_button_line_border_disabled

ui_cpnt_button_line_base_default

enabled

ui_cpnt_button_text_darktheme_enabled

ui_cpnt_button_icon_darktheme_enabled

ui_cpnt_button_line_border_darktheme_enabled

ui_cpnt_button_line_base_darktheme_default

hover

ui_cpnt_button_text_darktheme_enabled

ui_cpnt_button_icon_darktheme_enabled

ui_cpnt_button_line_border_darktheme_enabled

ui_cpnt_button_line_base_darktheme_hover

pressed

ui_cpnt_button_text_darktheme_enabled

ui_cpnt_button_icon_darktheme_enabled

ui_cpnt_button_line_border_darktheme_enabled

ui_cpnt_button_line_base_darktheme_pressed

disabled

ui_cpnt_button_text_darktheme_disabled

ui_cpnt_button_icon_darktheme_disabled

ui_cpnt_button_line_border_darktheme_disabled

ui_cpnt_button_line_base_darktheme_default

enabled

Web - TextLabel 참고

• colorTheme : usrTextBrandPrimary

ui_cpnt_button_icon_primary

ui_cpnt_button_primary_variation_base_enabled

hover

Web - TextLabel 참고

• colorTheme : usrTextBrandPrimary

ui_cpnt_button_icon_primary

ui_cpnt_button_fill_on_base_hover (ui_cpnt_button_primary_variation_base_enabled 위에 겹쳐짐)

pressed

Web - TextLabel 참고

• colorTheme : usrTextBrandPrimary

ui_cpnt_button_icon_primary

ui_cpnt_button_fill_on_base_pressed (ui_cpnt_button_primary_variation_base_enabled 위에 겹쳐짐)

disabled

Web - TextLabel 참고

• colorTheme : sysTextTertiary

ui_cpnt_button_icon_disabled

ui_cpnt_button_fill_base_disabled

*hover, pressed 액션 없음

enabled

Web - TextLabel 참고

• colorTheme : sysTextWhite

ui_cpnt_button_icon_on_primary

ui_cpnt_button_secondary_variation_base_default

hover

Web - TextLabel 참고

• colorTheme : sysTextWhite

ui_cpnt_button_icon_on_primary

ui_cpnt_button_secondary_variation_base_hover

pressed

Web - TextLabel 참고

• colorTheme : sysTextWhite

ui_cpnt_button_icon_on_primary

ui_cpnt_button_secondary_variation_base_pressed

disabled

ui_cpnt_button_text_secondary_variation_disabled

ui_cpnt_button_icon_secondary_variation_disabled

ui_cpnt_button_secondary_variation_base_default

*hover, pressed 액션 없음

enum

'none'

'none'

사용하지 않음

'use'

사용함

number | string | object | Array<string | object> | undefined | null

-

enum

'round'

'round'

둥근 직사각형 형태의 shapeType

'rectangle'

직사각형 형태의 shapeType

enum

'fill'

'fill'

면형으로 표현되는 버튼 fillType

'line'

선형으로 표현되는 버튼 fillType

enum

'primary'

'primary'

주요로 사용하는 버튼입니다.
화면 내에 전환이 있을 때 사용하고 가장 중요도가 높습니다.

'secondary'

Primary 버튼과 함께 쓰는 것을 권장합니다.
화면 내 중요도가 높지 않을 때 단독으로도 사용할 수 있습니다.

enum

'large'

'large'

높이 48px

'medium'

높이 40px

'small'

높이 32px

'xsmall'

높이 24px

'rlarge'

responsive - large (full-width)

enum

'bold'

'bold'

텍스트 사용 규칙의 ‘bold’를 따릅니다.

'regular'

텍스트 사용 규칙의 ‘regular’를 따릅니다.

-

-

-

-

-

-

enum

'none'

'none'

아이콘을 사용하지 않습니다.

'left'

아이콘을 왼쪽에 사용합니다.

'right'

아이콘을 오른쪽에 사용합니다.

enum

'line'

'line'

line 형태의 아이콘을 사용합니다.

'fill'

fill 형태의 아이콘을 사용합니다.

enum

-

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

enum

'normal'

'normal'

기본 상태 입니다.

'disabled'

비활성화 상태입니다.

enum

'hidden'

'hidden'

그림자 없음

'visible'

그림자 표시

enum

'none'

'none'

기본값 사용

'line1'

*base color는 spec 참고 (deprecated 예정)

{
border-color: ui_cpnt_button_line_border_error;
text-color: ui_cpnt_button_text_error;
icon-color: ui_cpnt_button_icon_error;
}

'line2'

*base color는 spec 참고 (deprecated 예정)

{
border-color: ui_cpnt_button_line_border_primary;
text-color: ui_cpnt_button_text_primary;
icon-color: ui_cpnt_button_icon_primary;
}

'line3'

*톤 설정과 상관없이 어두운 배경에 올라갈 때 사용합니다. (spec 기술 참고)
*fillType : line을 사용했을 때 적용이 됩니다.

(deprecated 예정)

'primary1'

Added in 1.8

주로 대화형 레이아웃 화면일 때 사용하는 버튼입니다.

'secondary1'

Added in 1.8

주로 대화형 레이아웃 화면일 때 사용하는 버튼입니다.

enum

'button'

'button'

기본적인 버튼의 역할을 합니다.

'submit'

form data를 제출하는 버튼의 역할을 합니다.

boolean

-

boolean

-

(e: React.MouseEvent<HTMLButtonElement>) => void;

-

(e: React.MouseEvent<HTMLButtonElement>) => void;

-

김혜진, 박윤규

• 2023/01/17 : colorTheme 추가(primary1, secondary1) - 김혜진

• 2022/11/11 : isLoading과 isSubmitting prop 추가 - 안은수

• 2022/09/29 : onClick과onMouseDown type 변경 - 안은수

• 2022/06/23 : 버튼의 사이즈별 min-width 기술 - 김혜진

• 2022/06/08 : spec 내 이미지 수정 - 김혜진

• 2022/06/08 : styleTheme prop추가, fillType prop의 default값 제거 - 안은수

• 2022/05/06 : shapeType 사용 가능으로 변경, 버전 정보 중 패치 버전 삭제 - 김혜진

• 2022/04/01 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수

• 2022/02/25 : 개발 코드 배포여부 추가 - 안은수

• 2022/01/27 : state prop 추가 - 김혜진

• 2022/01/26 : fontWeight의 default value 값 삭제 - 김혜진

• 2022/01/03 : 컬러와 관련한 prop 설명 문구 추가(fillType에 따른 적용범위) - 김혜진

• 2021/12/28 : 일반용/파일업로드용에 따른 spec 내 텍스트 값 추가 - 김혜진

• 2021/12/14 : colorTheme의 value 추가, 관련 spec 내용 추가(line3의 컬러키값) - 김혜진

• 2021/11/26 : fillType line일 때 spec 내 브랜드 컬러에 대한 값 삭제 - 김혜진

• 2021/11/17 : style을 styleTheme로 수정 - 김혜진

• 2021/11/16 : iconFillType에 대한 prop 추가 - 김혜진

• 2021/11/11 : Value에서 colorTheme 내 컬러키값 수정, Spec에서 버튼 텍스트의 행간에 대한 설명 추가 - 김혜진

• 2021/10/26 : 버튼 텍스트 TextLabel 값으로 수정(small 버튼 텍스트 사이즈 수정) - 김혜진

• 2021/10/25 : Spec 내 line 버튼 컬러키 값 수정 - 김혜진

• 2021/09/30 : Spec 내용 추가 - 김혜진

• 2021/09/14 : 디자인 제약조건 수정 - 김혜진

• 2021/09/13 : Principle, Notice, 디자인 제약조건 추가 - 김혜원

• 2021/09/10 : Property 및 Values 업데이트 - 박윤규

• 2021/09/08 : Property 및 Constant, Definition 초안 작성 - 박윤규

• 2021/09/07 : 메인 버튼 명칭 변경, Type 요소 재정리 - 김혜진

• 2021/09/01 : 메인 라운드 버튼 유형별 설명 - 김혜진

• 2021/08/31 : 메인 라운드 버튼 종류에 대한 추가 설명 - 김혜진

• 2021/08/30 : 메인 라운드 버튼 상세 내용 추가 - 김혜진

• 2021/08/27 : 1차 개요 작성 및 이미지 추가 - 김혜원