Skip to main content
Skip table of contents

Web - TextButton

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

Definition

정의

TextButton

최적화 대상

Desktop

Mobile

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

Principle

얼럿 다이얼로그와 같이 어떠한 영역을 가진 곳에 사용하게 되면 콘텐츠를 방해하지 않으면서 시각적으로 관련되어 보일 수 있습니다. 브랜드 컬러로 사용하여 좀 더 주목성을 가질 수 있게 합니다. (AlertDialog 참고)

  • MainButton과는 양 옆 padding 값 차이가 있고, 사이즈는 현재 large가 있습니다.

  • AlertDialog에 쓰여지고 있습니다.

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

사이즈별 용법

버튼은 사이즈별로 중요도와 용법이 다릅니다.

Large

(48px)

  • AlertDialog에 사용하고 있습니다.

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

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

Medium

(40px)

Small

(32px)

XSmall

(24px)

Spec

Guide

Size, Property

Large

Medium

Small

XSmall

Height

48px

40px

32px

24px

Width

-

-

-

-

text

Web - TextLabel 참고

  • styleTheme : body1Bold

  • singleLineMode : use

Web - TextLabel 참고

  • styleTheme : body2Bold

  • singleLineMode : use

Web - TextLabel 참고

  • styleTheme : caption1Bold

  • singleLineMode : use

Web - TextLabel 참고

  • style : caption1Regular

  • singleLineMode : use

iconSize

20px

16px

16px

N/A

radius

14px

14px

10px

4px

Color Key

colorTheme : none

textColor

baseColor

enabled

TextLabel

  • colorTheme : usrTextBrandPrimary

N/A

hovered

TextLabel

  • colorTheme : usrTextBrandPrimary

ui_cpnt_button_line_base_hover

pressed

TextLabel

  • colorTheme : usrTextBrandPrimary

ui_cpnt_button_line_base_pressed

disabled

TextLabel

  • colorTheme : sysTextTertiary

N/A

colorTheme : red

textColor

baseColor

enabled

TextLabel

  • colorTheme : sysTextError

N/A

hovered

TextLabel

  • colorTheme : sysTextError

ui_cpnt_button_line_base_hover

pressed

TextLabel

  • colorTheme : sysTextError

ui_cpnt_button_line_base_pressed

disabled

TextLabel

  • colorTheme : sysTextTertiary

N/A

colorTheme : grey_01

textColor

baseColor

enabled

TextLabel

  • colorTheme : sysTextPrimary

N/A

hovered

TextLabel

  • colorTheme : sysTextPrimary

ui_cpnt_button_line_base_hover

pressed

TextLabel

  • colorTheme : sysTextPrimary

ui_cpnt_button_line_base_pressed

disabled

TextLabel

  • colorTheme : sysTextTertiary

N/A

colorTheme : grey2

textColor

baseColor

enabled

TextLabel

  • colorTheme : sysTextSecondary

N/A

hovered

TextLabel

  • colorTheme : sysTextSecondary

ui_cpnt_button_line_base_hover

pressed

TextLabel

  • colorTheme : sysTextSecondary

ui_cpnt_button_line_base_pressed

disabled

TextLabel

  • colorTheme : sysTextTertiary

N/A

colorTheme : white

textColor

baseColor

enabled

TextLabel

  • colorTheme : sysTextWhite

N/A

hovered

TextLabel

  • colorTheme : sysTextWhite

ui_cpnt_button_white_base_hover

pressed

TextLabel

  • colorTheme : sysTextWhite

ui_cpnt_button_white_base_pressed

disabled

TextLabel

  • colorTheme : sysTextTertiary

N/A

colorTheme : white2

textColor

baseColor

enabled

TextLabel

  • colorTheme : sysTextWhite

N/A

hovered

TextLabel

  • colorTheme : sysTextWhite

ui_cpnt_textbutton_white_variation_base_hover

pressed

TextLabel

  • colorTheme : sysTextWhite

ui_cpnt_textbutton_white_variation_base_pressed

disabled

TextLabel

  • colorTheme : sysTextTertiary

N/A

Properties

responsiveMode

Added in 1.2

화면에 맞춰 늘릴 것인지 결정합니다. (반응형)

기획 지시사항

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

Type

enum

Default

'none'

Enum Values Description

'none'

사용하지 않음

'use'

사용함

text

표시할 텍스트 값입니다. (최대 12자로 기획 권장)

기획 지시사항

  • 기획서 상 작성 방법 : 텍스트만 기술

Type

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

Default

-

size

크기를 결정합니다. 단순히 요소의 width, height 뿐만 아니라 텍스트 크기, 아이콘 크기 등이 다 포함됩니다.

기획 지시사항

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

Type

enum

Default

'large'

Enum Values Description

'large'

CODE 
{
height: 48px;
padding-left: 8px;
padding-right: 8px;
}

'medium'

'small'

'xsmall'

'rlarge'

responsive - large (full-width)

fontWeight

텍스트의 굵기를 의미합니다.

기획 지시사항

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

Type

enum

Default

-

Enum Values Description

'bold'

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

'regular'

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

state

Added in 1.2

상태를 결정합니다.

기획 지시사항

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

Type

enum

Default

'normal'

Enum Values Description

'normal'

기본 상태 입니다.

'disabled'

비활성화 상태입니다.

colorTheme

컬러의 프리셋 테마입니다.

기획 지시사항

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

Type

enum

Default

'none'

Enum Values Description

'none'

기본값입니다.

'red'

Added in 1.4

빨간색 텍스트 버튼입니다. (sysTextError)

*커스텀 컬러 적용과 상관 없이 항상 빨간색으로 표현됩니다. (시스템 컬러)

'grey_01'

Added in 1.4

sysTextPrimary 컬러가 입혀진 텍스트 버튼입니다.

*커스텀 컬러 적용과 상관 없이 항상 sysTextPrimary 컬러로 표현됩니다. (시스템 컬러)

'grey2'

Added in 2.1

sysTextSecondary 컬러가 입혀진 텍스트 버튼입니다.

*커스텀 컬러 적용과 상관 없이 항상 sysTextSecondary 컬러로 표현됩니다. (시스템 컬러)

'white'

Added in 1.4

white 컬러가 입혀진 텍스트 버튼입니다.

*커스텀 컬러 적용과 상관 없이 항상 white 컬러로 표현됩니다. (시스템 컬러)
*다크톤의 배경 위에 올라갈 때 사용하는 것을 권장합니다.

default

hover

pressed

'white2'

Added in 1.9

white 컬러가 입혀진 텍스트 버튼입니다.

*커스텀 컬러 적용과 상관 없이 항상 white 컬러로 표현됩니다. (시스템 컬러)
*컬러 배경 위에 올라갈 때 사용하는 것을 권장합니다.

type

Added in 1.2

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

기획 지시사항

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

Type

enum

Default

'button'

Enum Values Description

'button'

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

'submit'

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

'reset'

form data를 초기 값으로 재설정하는 버튼의 역할을 합니다.

onClick

Added in 1.2

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

기획 지시사항

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

Type

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

Default

-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

  • 2023/06/27 : colorTheme에 grey2 추가 - 김혜진

  • 2023/02/02 : colorTheme에 white2 추가 - 김혜진

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

  • 2022/06/29 : 사이즈 내 xsmall~medium 사용가능하도록 문서 수정 - 김혜진

  • 2022/06/16 : white 일 때 컬러값 수정(hover, pressed) - 김혜진

  • 2022/06/09 : colorTheme의 value 추가(white) 및 spec 내용 추가 기술 - 김혜진

  • 2022/05/24 : colorTheme의 value 추가(red, grey_01) - 김혜진

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

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

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

  • 2022/01/26 : spec 내 radius 값 추가 - 김혜진

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

  • 2021/11/11 : Text에 행간에 대한 설명 추가 - 김혜진

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

  • 2021/09/29 : Principle, Spec 내용 추가 - 김혜진

  • 2021/09/14 : 제약 조건 설명 추가 - 김혜진

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

  • 2021/09/08 : Principle 내용 추가 - 김혜진

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

  • 2021/09/07 : 최초 작성 - 김혜원

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close