Action Button
명확한 액션을 쉽게 수행할 수 있도록 돕는 기본 인터랙션 컴포넌트입니다.
컴포넌트 명세 (Component Specification)
Anatomy
button
icon
기본 기능
사용자의 상호작용을 통해 저장, 취소 등 시스템 내 특정 명령이나 액션을 실행하는 핵심 조작 버튼입니다.
시각 옵션
right
left
size
style
상태
default
disabled
내부 구성
text
icon
사이즈 가이드 (Size Guide )
Button 사이즈는 xsl, sl, m, l로 제공합니다.
버튼 형태 (Variant)
Action Button 색상은 Brand Solid, Neutral Solid, Brand Weak, Neutral Outline, Neutral Ghost, Positive Ghost, Warning Ghost 총 7가지 Variant로 구성됩니다.
상태 (State)
Action Button은 Default, Disabled 상태를 가집니다.
사용 예시 (Use Case)
실제 서비스 화면에서 Action Button이 배치되고 활용되는 패턴입니다.
버튼 확장 (Button Stretch)
Button의 너비를 상위 요소에 맞춰 확장할 수 있습니다.
세로 정렬 (Vertical Alignment)
버튼 여러 개를 가로 방향으로 나란히 정렬해 연관된 액션을 표현합니다.
버튼 사이 간격은 버튼 사이즈에 따라 조정하여 사용합니다.
가로 정렬 (Horizontal Alignment)
버튼 여러 개를 가로 방향으로 나란히 정렬해 연관된 액션을 표현합니다.
버튼 사이 간격은 버튼 사이즈에 따라 조정하여 사용합니다.
Horizontal
출근하기
기타
아이콘 추가 (Icon Addition)
텍스트 라벨 앞(Left)이나 뒤(Right)에 아이콘을 함께 배치하여 액션의 의미를
시각적으로 보조합니다.
아이콘 변경 (Icon Swap)
텍스트 라벨 앞(Left)이나 뒤(Right)에 아이콘을 함께 배치하여 액션의 의미를
시각적으로 보조합니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
