Box button
Box 형태의 Container가 포함된 가장 일반적인 버튼입니다. 화면 콘텐츠 영역의 상,하단에 배치하여 화면 내 주요한 액션을 수행할 수 있는 역할을 합니다.
Figma UI Kit
DONE
Contents
DONE
Develop
iOS
DONE
Android
DONE
Box button
Box 형태의 Container가 포함된 가장 일반적인 버튼입니다. 화면 콘텐츠 영역의 상,하단에 배치하여 화면 내 주요한 액션을 수행할 수 있는 역할을 합니다.
Figma UI Kit
DONE
Contents
DONE
Develop
iOS
DONE
Android
DONE
Box button
Box 형태의 Container가 포함된 가장 일반적인 버튼입니다. 화면 콘텐츠 영역의 상,하단에 배치하여 화면 내 주요한 액션을 수행할 수 있는 역할을 합니다.
Figma UI Kit
DONE
Contents
DONE
Develop
iOS
DONE
Android
DONE
Overview
Overview
Overview
Name
Name
Value
Value
Description
Description
Primary
플로우 내 핵심 행동을 유도하는 메인 버튼으로
가장 높은 우선순위를 가집니다.
• 결제, 신청, 등록 등 최종 액션
• PDP·IDP에서 “예약하기”
• 로그인 페이지 내 “로그인”
• 필터 설정 내 “적용”
Secondary
Primary 버튼을 보조하며, 상대적으로 덜 중요한 행동을
제공하기 위해 사용합니다.
• 다이얼로그 내 “닫기”
• 부가적 액션 (e.g. ‘자세히 보기’)
• 중요도가 낮지만 명확히 안내할 필요가 있는 경우
Highlight
Primary보다 중요도는 낮지만 반드시 진행해야 하는
기본 행동을 강조하기 위해 사용합니다.
• 리뷰 작성 시 “사진 첨부”
• 필수 보조 액션
• 단독 사용만 허용 (그룹 배치 불가)
Destructive
Primary
사용자 데이터에 큰 영향을 미치거나
되돌릴 수 없는 작업에 사용합니다.
• “예약 취소”, “계정 삭제” 등 치명적 행동
• e.g. ‘삭제하기’, ‘예약 취소’ (짧고 직관적인 레이블 권장)
Destructive
Secondary
Destructive Primary 버튼을 보조하며,
국소적/부분적으로 파괴적 영향을 주는 작업에 사용합니다.
• 특정 항목만 삭제
• e.g. '선택 항목 삭제', '탑승객 일부 취소'
Usage
Usage
Usage
Horizontal button group
Horizontal button group
Horizontal button group
2 button
2 button
2 button
2개의 버튼 그룹은 Primary와 Secondary로 구성하며, 그룹 내 Primary는 하나만 허용됩니다. Primary 버튼은 항상 오른쪽에 배치하여 주요 액션을 명확히 합니다.
2개의 버튼 그룹은 Primary와 Secondary로 구성하며, 그룹 내 Primary는 하나만 허용됩니다. Primary 버튼은 항상 오른쪽에 배치하여 주요 액션을 명확히 합니다.
2개의 버튼 그룹은 Primary와 Secondary로 구성하며, 그룹 내 Primary는 하나만 허용됩니다. Primary 버튼은 항상 오른쪽에 배치하여 주요 액션을 명확히 합니다.
Primary와 Highlight 버튼은 함께 배치하지 않습니다. 두 버튼 모두 시각적으로 강조되어 우선순위 혼동을 일으킵니다.
Primary와 Highlight 버튼은 함께 배치하지 않습니다. 두 버튼 모두 시각적으로 강조되어 우선순위 혼동을 일으킵니다.
Primary와 Highlight 버튼은 함께 배치하지 않습니다. 두 버튼 모두 시각적으로 강조되어 우선순위 혼동을 일으킵니다.
Primary와 Destructive 버튼은 함께 배치하지 않습니다. 시각적 우선순위가 같아 사용자가 잘못된 행동을 선택할 위험이 있습니다.
Primary와 Destructive 버튼은 함께 배치하지 않습니다. 시각적 우선순위가 같아 사용자가 잘못된 행동을 선택할 위험이 있습니다.
Primary와 Destructive 버튼은 함께 배치하지 않습니다. 시각적 우선순위가 같아 사용자가 잘못된 행동을 선택할 위험이 있습니다.
숙박/대실 예약처럼 두 액션 모두 동일하게 중요한 경우, Primary 버튼 2개를 예외적으로 허용합니다.
숙박/대실 예약처럼 두 액션 모두 동일하게 중요한 경우, Primary 버튼 2개를 예외적으로 허용합니다.
숙박/대실 예약처럼 두 액션 모두 동일하게 중요한 경우, Primary 버튼 2개를 예외적으로 허용합니다.
동일한 중요도의 보조 액션은 Secondary 버튼 2개로 구성합니다. e.g. ‘주소 복사’ + ‘지도 보기’
동일한 중요도의 보조 액션은 Secondary 버튼 2개로 구성합니다. e.g. ‘주소 복사’ + ‘지도 보기’
동일한 중요도의 보조 액션은 Secondary 버튼 2개로 구성합니다. e.g. ‘주소 복사’ + ‘지도 보기’
3 buttons or more
3 buttons or more
3 buttons or more
3개 이상의 버튼 그룹은 Primary와 Secondary 버튼을 함께 사용합니다. 그룹 내 Primary는 하나만 허용되며, 항상 오른쪽에 배치합니다.
3개 이상의 버튼 그룹은 Primary와 Secondary 버튼을 함께 사용합니다. 그룹 내 Primary는 하나만 허용되며, 항상 오른쪽에 배치합니다.
3개 이상의 버튼 그룹은 Primary와 Secondary 버튼을 함께 사용합니다. 그룹 내 Primary는 하나만 허용되며, 항상 오른쪽에 배치합니다.
Vertical button group
Vertical button group
Vertical button group
2 button
2 button
2 button
2개의 버튼을 세로로 배치할 때는 Primary와 Secondary를 함께 사용하며, Primary는 하나만 사용하는 것을 원칙으로 합니다. Primary 버튼은 항상 최상단에 배치하며, Dialog 하단의 “닫기” 버튼은 예외로 텍스트 버튼을 허용합니다.
2개의 버튼을 세로로 배치할 때는 Primary와 Secondary를 함께 사용하며, Primary는 하나만 사용하는 것을 원칙으로 합니다. Primary 버튼은 항상 최상단에 배치하며, Dialog 하단의 “닫기” 버튼은 예외로 텍스트 버튼을 허용합니다.
2개의 버튼을 세로로 배치할 때는 Primary와 Secondary를 함께 사용하며, Primary는 하나만 사용하는 것을 원칙으로 합니다. Primary 버튼은 항상 최상단에 배치하며, Dialog 하단의 “닫기” 버튼은 예외로 텍스트 버튼을 허용합니다.
Secondary와 Highlight 버튼은 함께 배치하지 않습니다. Highlight 버튼은 원칙적으로 단독 사용만 허용됩니다.
Secondary와 Highlight 버튼은 함께 배치하지 않습니다. Highlight 버튼은 원칙적으로 단독 사용만 허용됩니다.
Secondary와 Highlight 버튼은 함께 배치하지 않습니다. Highlight 버튼은 원칙적으로 단독 사용만 허용됩니다.
동일한 중요도의 보조 행동은 Secondary 버튼으로 구성합니다. e.g. ‘예약번호 복사’ + ‘예약내역 공유하기’
동일한 중요도의 보조 행동은 Secondary 버튼으로 구성합니다. e.g. ‘예약번호 복사’ + ‘예약내역 공유하기’
동일한 중요도의 보조 행동은 Secondary 버튼으로 구성합니다. e.g. ‘예약번호 복사’ + ‘예약내역 공유하기’
버튼 텍스트가 길어 가로 공간을 확보하기 어렵다면 세로 배치가 적합합니다. 텍스트가 짧고 간결할 경우에는 가로 배치를 우선적으로 사용합니다.
버튼 텍스트가 길어 가로 공간을 확보하기 어렵다면 세로 배치가 적합합니다. 텍스트가 짧고 간결할 경우에는 가로 배치를 우선적으로 사용합니다.
버튼 텍스트가 길어 가로 공간을 확보하기 어렵다면 세로 배치가 적합합니다. 텍스트가 짧고 간결할 경우에는 가로 배치를 우선적으로 사용합니다.
3 buttons or more
3 buttons or more
3 buttons or more
3개 이상의 버튼을 세로로 배치할 때는 Primary 버튼은 하나만 허용되며, 항상 최상단에 배치합니다. 단, 로그인/회원가입과 비회원 예약처럼 동일한 계층의 경로 선택을 제공해야 하는 경우만 두 버튼을 동등한 중요도의 옵션으로 처리할 수 있습니다.
3개 이상의 버튼을 세로로 배치할 때는 Primary 버튼은 하나만 허용되며, 항상 최상단에 배치합니다. 단, 로그인/회원가입과 비회원 예약처럼 동일한 계층의 경로 선택을 제공해야 하는 경우만 두 버튼을 동등한 중요도의 옵션으로 처리할 수 있습니다.
3개 이상의 버튼을 세로로 배치할 때는 Primary 버튼은 하나만 허용되며, 항상 최상단에 배치합니다. 단, 로그인/회원가입과 비회원 예약처럼 동일한 계층의 경로 선택을 제공해야 하는 경우만 두 버튼을 동등한 중요도의 옵션으로 처리할 수 있습니다.
Credit
Contributor
픽시@Pixie, 제티@Jetty
Credit
Contributor
픽시@Pixie, 제티@Jetty
Credit
Contributor
픽시@Pixie, 제티@Jetty
Copyright © GC COMPANY Corp. All rights reserved.
Copyright © GC COMPANY Corp.
All rights reserved.
Copyright © GC COMPANY Corp. All rights reserved.