Button
Button은 사용자가 클릭 또는 탭을 통해 특정 작업을 수행하도록 트리거하는 기본 UI 요소입니다. 사용자의 주요 행동(Action)을 실행하는 데 사용되며, 제품 내에서 가장 기본적인 상호작용 패턴을 제공합니다.
Figma UI Kit
DONE
Contents
DONE
Develop
iOS
DONE
Android
DONE
Button
Button은 사용자가 클릭 또는 탭을 통해 특정 작업을 수행하도록 트리거하는 기본 UI 요소입니다. 사용자의 주요 행동(Action)을 실행하는 데 사용되며, 제품 내에서 가장 기본적인 상호작용 패턴을 제공합니다.
Figma UI Kit
DONE
Contents
DONE
Develop
iOS
DONE
Android
DONE
Button
Button은 사용자가 클릭 또는 탭을 통해 특정 작업을 수행하도록 트리거하는 기본 UI 요소입니다. 사용자의 주요 행동(Action)을 실행하는 데 사용되며, 제품 내에서 가장 기본적인 상호작용 패턴을 제공합니다.
Figma UI Kit
DONE
Contents
DONE
Develop
iOS
DONE
Android
DONE
Overview
Overview
Overview
Box button
Box button
Box button
Box subtle button
Box subtle button
Box subtle button
FAB (Floating Action Button)
FAB (Floating Action Button)
FAB (Floating Action Button)
Icon button
Icon button
Icon button
Text button
Text button
Text button
Hierarchy
Hierarchy
Hierarchy
Usage
Usage
Usage
Prefix icon
• 버튼 텍스트의 의미를 직관적으로 보조하여 사용자가 빠르게 이해할 수 있도록 합니다. • 아이콘을 통해 버튼의 기능을 시각적으로 설명하여 인지 효율을 높입니다. • 버튼의 주목성과 가시성을 강화할 때 사용합니다
Prefix icon
• 버튼 텍스트의 의미를 직관적으로 보조하여 사용자가 빠르게 이해할 수 있도록 합니다. • 아이콘을 통해 버튼의 기능을 시각적으로 설명하여 인지 효율을 높입니다. • 버튼의 주목성과 가시성을 강화할 때 사용합니다
Prefix icon
• 버튼 텍스트의 의미를 직관적으로 보조하여 사용자가 빠르게 이해할 수 있도록 합니다. • 아이콘을 통해 버튼의 기능을 시각적으로 설명하여 인지 효율을 높입니다. • 버튼의 주목성과 가시성을 강화할 때 사용합니다
버튼의 의미를 모호하게 만드는 아이콘은 사용을 금지합니다.
버튼의 의미를 모호하게 만드는 아이콘은 사용을 금지합니다.
버튼의 의미를 모호하게 만드는 아이콘은 사용을 금지합니다.
버튼의 의미와 기능을 보조할 수 있는 아이콘을 사용해주세요.
버튼의 의미와 기능을 보조할 수 있는 아이콘을 사용해주세요.
버튼의 의미와 기능을 보조할 수 있는 아이콘을 사용해주세요.
Suffix icon
• Suffix icon은 Arrow 계열만 가능합니다. • 버튼의 행동이 이동, 확장, 상세 보기 등을 의미할 때, 뒤에 Arrow icon을 배치하여 사용자가 동작을 직관적으로 예측할 수 있도록 합니다. • 버튼 텍스트 작성 규칙(‘~기’체 사용 여부 등)은 Button content guideline을 참고하세요.
Suffix icon
• Suffix icon은 Arrow 계열만 가능합니다. • 버튼의 행동이 이동, 확장, 상세 보기 등을 의미할 때, 뒤에 Arrow icon을 배치하여 사용자가 동작을 직관적으로 예측할 수 있도록 합니다. • 버튼 텍스트 작성 규칙(‘~기’체 사용 여부 등)은 Button content guideline을 참고하세요.
Suffix icon
• Suffix icon은 Arrow 계열만 가능합니다. • 버튼의 행동이 이동, 확장, 상세 보기 등을 의미할 때, 뒤에 Arrow icon을 배치하여 사용자가 동작을 직관적으로 예측할 수 있도록 합니다. • 버튼 텍스트 작성 규칙(‘~기’체 사용 여부 등)은 Button content guideline을 참고하세요.
버튼 텍스트 어미에 ‘~기'체를 사용할 경우 주의해주세요.
버튼 텍스트 어미에 ‘~기'체를 사용할 경우 주의해주세요.
버튼 텍스트 어미에 ‘~기'체를 사용할 경우 주의해주세요.
버튼 텍스트 어미에 ‘~기'체를 사용할 경우 주의해주세요.
버튼 텍스트 어미에 ‘~기'체를 사용할 경우 주의해주세요.
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.