Web - FloatingActionButton

Definition

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

Principle

FAB는 Shadow를 가지고 있으며, Overlay Layer에 포함되는 요소이기 때문에 elevation-3으로 설정합니다. (Elevations and Shadows 문서 참고)

‌또한 항상 우측 하단에 고정된 위치에 놓여집니다. position: fixed; bottom: 24px; right: 24px;

‌FAB 종류

btnMode : icon (default)

아이콘으로만 구성된 버튼입니다.
페이지 내 관련된 액션들이 모여있을 경우 여러 개를 배치할 수 있습니다.
‌

btnMode : text (extended)

아이콘과 텍스트가 결합된 형태의 버튼입니다.
페이지에 하나만 존재해야 하며, 높은 주목성을 가져야 합니다. 따라서 브랜드 컬러를 적용하여 강조합니다.
주로 콘텐츠를 '생성'하는 영역에 사용합니다.

‌

Spec

Guide

Size, Property

종류

Height

Width

text

iconSize

radius

XLarge

64px

N/A

24px

14px
(텍스트가 존재하는 경우에만)

Large

48px

N/A

Web - TextLabel 참고

styleTheme : body1Bold
singleLineMode : use

20px

14px
(텍스트가 존재하는 경우에만)

‌

Color 구성

Color Key

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

btnMode : icon (기본형)

	iconColor	baseColor
enabled	기본 : `ui_cpnt_fab_icon_enabled` 특정 시스템 및 브랜드 컬러 :`ui_cpnt_fab_icon_on_primary`	기본 : `ui_cpnt_fab_default_base_white` 특정 시스템 컬러 (종료) : `ui_cpnt_fab_default_base_red` 브랜드 컬러 : `ui_cpnt_fab_default_base_primary`
hover	기본 : `ui_cpnt_fab_icon_enabled` 특정 시스템 및 브랜드 컬러 :`ui_cpnt_fab_icon_on_primary`	기본 : `ui_cpnt_fab_default_base_hover`(`ui_cpnt_fab_default_base_primary` 위에 겹쳐짐) 특정 시스템 및 브랜드 컬러 : `ui_cpnt_fab_default_on_base_hover`(`ui_cpnt_fab_default_base_primary` 위에 겹쳐짐)
pressed	기본 : `ui_cpnt_fab_icon_enabled` 특정 시스템 및 브랜드 컬러 :`ui_cpnt_fab_icon_on_primary`	기본 : `ui_cpnt_fab_default_base_pressed`(`ui_cpnt_fab_default_base_primary` 위에 겹쳐짐) 특정 시스템 및 브랜드 컬러 : `ui_cpnt_fab_default_on_base_pressed` (`ui_cpnt_fab_default_base_primary` 위에 겹쳐짐)
disabled	`ui_cpnt_fab_icon_disabled`	`ui_cpnt_fab_icon_disabled` *hover, pressed 액션 없음

‌btnMode : text (확장형)

	textColor	iconColor	baseColor
enabled	TextLabel colorTheme : usrTextBrandOnPrimary	`ui_cpnt_fab_icon_on_primary`	`ui_cpnt_fab_extended_base_primary`
hover	TextLabel colorTheme : usrTextBrandOnPrimary	`ui_cpnt_fab_icon_on_primary`	`ui_cpnt_fab_extended_on_base_hover` (`ui_cpnt_fab_extended_base_primary` 위에 겹쳐짐)
pressed	TextLabel colorTheme : usrTextBrandOnPrimary	`ui_cpnt_fab_icon_on_primary`	`ui_cpnt_fab_extended_on_base_pressed` (`ui_cpnt_fab_extended_base_primary` 위에 겹쳐짐)
disabled	TextLabel colorTheme : sysTextTertiary	`ui_cpnt_fab_icon_disalbed`	`ui_cpnt_fab_extended_base_disabled`

Properties

text

표시할 텍스트 값입니다. btnLayoutMode 값이 text일때만 제대로 표시됩니다.

기획 지시사항

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

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

btnMode (Deprecated in 1.2)

Deprecated in 1.2

~~표시 레이아웃 방식을 결정합니다.~~

Type	`enum`
Default	-

Enum Values Description
~~icon~~	~~원형 형태의 shapeType으로 icon 값만 표시하는 버튼~~
~~text~~	~~둥근 직사각형 형태의 shapeType으로 텍스트와 같이 표시하는 버튼~~

displayType

Added in 1.2

표시 레이아웃 방식을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'icon_text'`

Enum Values Description
`'icon_text'`	아이콘과 텍스트 결합
`'icon_only'`	아이콘만 있음
`'text_only'`	텍스트만 있음

size

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

기획 지시사항

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

Type	`enum`
Default	`'large'`

Enum Values Description
`'xlarge'`
`'large'`

fontWeight

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

기획 지시사항

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

Type	`enum`
Default	`'bold'`

Enum Values Description
`'regular'`	텍스트 사용 규칙의 ‘regular’를 따릅니다.
`'bold'`	텍스트 사용 규칙의 ‘bold’를 따릅니다.

textColorKey

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

텍스트 컬러입니다.

baseColorKey

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

배경 컬러입니다.

borderColorKey

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

라인의 컬러입니다.

iconMode (Deprecated in 1.2)

Deprecated in 1.2

~~아이콘 유무와 위치를 결정합니다.~~

~~기획 지시사항~~

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

Type	~~enum~~
Default	~~'select'~~

Enum Values Description
~~none~~	~~아이콘 없음~~
~~left~~	~~아이콘 좌측 위치~~

iconFillType

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

기획 지시사항

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

Type	`enum`
Default	`'line'`

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

iconName

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

기획 지시사항

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

Type	`enum`
Default	-

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

colorTheme

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

컬러의 프리셋 테마입니다. fillType을 고려하여 만들어졌지만, 코드에서 예외처리를 하지 않습니다. 예를 들어, Line fillType에 최적화된 컬러테마를 Fill fillType에 적용한 것은 그냥 사람이 잘못한 것입니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`
`'theme1'`
`'theme2'`
`'theme3'`

state

Added in 1.2

상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

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

onClick

Added in 1.2

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

기획 지시사항

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

Type	`(e: React.MouseEvent<HTMLButtonElement>) => void;`
Default	-

onMouseDown

Added in 1.2

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

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

기획 지시사항

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

Type	`(e: React.MouseEvent<HTMLButtonElement>) => void;`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/09/29 : onClick과onMouseDown type 변경 - 안은수
2022/06/08 : spec 내 이미지 수정 - 김혜진
2022/05/31 : spec 수정 (radius) - 김혜진
2022/03/24 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2022/02/19 : Property 기술방법 변경 - 박윤규
2022/01/26 : btnMode, iconMode prop 삭제 및 displayType 추가(통합prop) - 김혜진
2021/11/17 : style을 styleTheme로 수정 - 김혜진
2021/11/16 : iconFillType에 대한 prop 추가 - 김혜진
2021/11/11 : Text 행간에 대한 설명 문구 추가 - 김혜진
2021/10/26 : 텍스트 부분 TextLabel 값으로 수정 - 김혜진
2021/09/29 : Spec 업데이트 - 김혜진
2021/09/16 : Principle 내용 추가 - 김혜진
2021/09/10-11 : Property 및 Value 업데이트 - 박윤규
2021/09/08 : Property 및 Constant, Definition 초안 작성 - 박윤규
2021/09/07 : 메인 버튼 명칭 변경, Type 요소 재정리 - 김혜진
2021/09/01 : 메인 라운드 버튼 유형별 설명 - 김혜진
2021/08/31 : 메인 라운드 버튼 종류에 대한 추가 설명 - 김혜진
2021/08/30 : 메인 라운드 버튼 상세 내용 추가 - 김혜진
2021/08/27 : 1차 개요 작성 및 이미지 추가 - 김혜원