03 · Components · 액션
플로팅 액션 버튼Floating Action Button
화면 위에 떠서 항상 접근 가능한 주요 동작 버튼. 한 화면에 단 하나의 FAB만 사용하며, 해당 화면에서 가장 중요한 행동을 가리킵니다.
StableWCAG AA
예시 모양
실제 화면에서는 페이지 우하단에 고정됩니다. 아래는 모양을 보기 위한 샘플이며, 실사용에선 position prop으로 배치합니다.
FAB는 보통 아이콘만 있는 버튼입니다. 반드시 aria-label로 이름을 제공해야 하며, 타입스크립트 타입상 필수로 지정해 두었습니다.
기본 사용
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label* | string | 스크린리더용 이름. 타입상 필수. | |
position | "bottom-right" | "bottom-left" | "bottom-center" | "bottom-right" | 화면 내 고정 위치. |
size | "md" | "lg" | "lg" | 버튼 지름 48 / 56px. |
onClick | (e: MouseEvent) => void | 클릭 이벤트. |