Skip to main content
Skip table of contents

Web - UploadTextButton

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

*현재 TextButton 문서 복제한 상태이며, 추후 자세한 내용 정리 들어갈 예정

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

  • font size : body1

  • font weight : bold

  • singleLine

  • font size : body2

  • font weight : bold

  • singleLine

  • font size : caption1

  • font weight : bold

  • singleLine

  • font size : caption1

  • font weight : regular

  • singleLine

iconSize

20px

16px

16px

N/A

radius

14px

12px

10px

8px

Color KeyColor 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 컬러로 표현됩니다. (시스템 컬러)
*컬러 배경 위에 올라갈 때 사용하는 것을 권장합니다.

accept

Added in 1.2

특정 확장자 혹은 타입의 파일만 선택할 수 있게 합니다.

기획 지시사항

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

Type

string

Default

'*'

multipleMode

Added in 1.2

복수 혹은 단수의 파일 선택 여부를 결정합니다.

기획 지시사항

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

Type

enum

Default

'none'

Enum Values Description

'none'

단일 파일만 선택이 가능합니다.

'use'

복수개의 파일 선택이 가능합니다.

onClick

Added in 1.2

파일 탐색기에서 파일을 선택을 결정한 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type

(e: React.ChangeEvent<HTMLInputElement>) => void

Default

-


문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

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

  • 2023/02/02 : colorTheme에 white2 추가 - 안은수

  • 2022/11/07 : onClick 설명글 변경 - 안은수

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

  • 2022/05/25 : colorTheme사항 TextButton과 같게 업데이트 - 김혜진

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

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

  • 2022/01/27 : 문서 복제 - 김혜진

JavaScript errors detected

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

If this problem persists, please contact our support.