03 · Components · 액션
플로팅 액션 버튼Floating Action Button
화면 위에 떠서 항상 접근 가능한 주요 동작 버튼. 한 화면에 단 하나의 FAB만 사용하며, 해당 화면에서 가장 중요한 행동을 가리킵니다.
StableWCAG AA
예시 모양
실제 화면에서는 페이지 우하단에 고정됩니다. 아래는 모양을 보기 위한 샘플이며, 실사용에선 position prop으로 배치합니다.
tsx
<FloatingActionButton aria-label="새 글 쓰기">
<Plus size={22} strokeWidth={2} />
</FloatingActionButton>미리보기
FAB는 보통 아이콘만 있는 버튼입니다. 반드시 aria-label로 이름을 제공해야 하며, 타입스크립트 타입상 필수로 지정해 두었습니다.
기본 사용
tsx
import { FloatingActionButton } from "@/components/ui/FloatingActionButton";
import { Plus } from "lucide-react";
<FloatingActionButton
aria-label="새 글 쓰기"
onClick={() => openComposer()}
>
<Plus size={22} />
</FloatingActionButton>미리보기
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 | 클릭 이벤트. |