Floating Action Button
화면 상에 떠 있으며 주요 액션을 실행하는 버튼입니다.
컴포넌트 명세 (Component Specification)
Anatomy
button
icon
기본 기능
사용자의 상호작용을 통해 저장, 취소 등 시스템 내 특정 명령이나 액션을 실행하는 핵심 조작 버튼
시각 옵션
right
left
size
style
상태
default
disabled
내부 구성
text
icon
사이즈 가이드 (Size Guide )
Floating Action Button의 사이즈는 기본 52*52px 단일 사이즈로 제공됩니다.
상태 (State)
Floating Action Button의 상태는 Default, Pressed 총 2가지 Variant로 구성됩니다.
상태 (State)
Floating Action Button의 상태는 Default, Pressed 총 2가지 Variant로 구성됩니다.
분류 (Variant)
총 3가지의 아이콘 타입을 변경하여 화면에 맞게 적절하게 사용합니다.
사용 예시 (Use Case)
실제 서비스 화면에서 Floating Action Button이 배치되고 활용되는 패턴입니다.
FAB 간격 (FAB Spacing)
FAB은 화면 우측 하단에 위치해야 하며, 화면 내 주요 액션으로 하나만 존재할
수 있습니다. 또한, 하단에 고정된 요소가 있는 경우 고정된 요소를 기준으로
여백을 확보해야 합니다.
FAB 위치 (FAB Placement)
FAB의 위치는 우측 하단에 위치해야합니다. 화면 중앙 혹은 왼쪽에 임의적으로
위치할 수 없습니다.
FAB와 토스트의 위치 관계 (FAB Placement)
화면에 FAB가 있을 때 Toast가 나타나면, FAB와 Toast는 겹치지 않고
항상 FAB의 아래에 위치합니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
