Back

Button

각 버튼에는 반응형 정책에 따른 Text Size를 적용합니다.

1) System Buttons

Social Login _ Rectangle

각 사 정책에 따라 여백 및 활용 규정을 적용해, 통일감을 줄 수 있는 소셜로그인 버튼을 정의합니다.

Rectangle의 경우, 소셜로그인 단독으로 쓰일 때 활용합니다.

최근로그인 등의 표시 정보가 추가로 보여질 수 있습니다.

Button Height 45px

Social Login _ Square

Square 타입의 경우, Combine Sign Up에서 일반로그인과 소셜로그인을 함께 사용할 때 적용합니다.

Floating Action Buttons

Scroll Fixed로 적용되는 FAB를 정의합니다.

Default, With Text 두 가지 타입으로 활용할 수 있으며, 주로 메인 화면에서 채널톡, 채팅, 링크 연결 등의 용도로 적용합니다.

2) Round

컴포넌트의 Height 값에 따라 Large / Medium / Small / Xsmall 로 Button Size를 구분합니다.

Large Height 50px

Medium Height 40px

Small Height 30px

Extra Small Height 26px

Large Padding 15px

Medium Padding 15px

Small Padding 15px

Extra Small Padding 8px

Large _ Solid / Line

반응형 정책에 따라 해당하는 Text Size를 적용합니다.

Solid 와 Line 두 가지 Type을 활용하며, 버튼의 State에 따라 Primary, Point, Disable 상태를 적용할 수 있습니다.

Medium _ Solid / Line

Small _ Solid / Line

소분류 메뉴탭 등에 활용될 경우를 고려해, Small / Extra Small Button에는 Default ****State가 추가됩니다.

Extra Small _ Solid / Line

3) Round Arrow

Round Button에 Arrow가 포함되는 형태의 버튼입니다.

해당 컴포넌트에서 Arrow Icon은 Figma Auto layout으로 배치되며, 여백 규정에 따라 정사각형이 아닌 단일 아이콘 형태로 조합됩니다.

다른 형태의 Arrow icon으로 조합해서 활용 가능합니다.

Figma Component 패널에서 토글 스위치 형태로 적용 가능합니다.

나머지 내용은 2) Round와 동일합니다.

4) Rectangle

R값이 5px 적용된 Rectangle Button을 정의합니다.