Floating Action Button
화면 위에 떠 있으며 화면의 주요 액션을 실행하는 버튼이에요.
설치
pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/floating-action-button.jsonclass-variance-authority 를 설치하고 아래 코드를 components/ui/floating-action-button.tsx 에 복사해요.
Anatomy
Floating Action Button은 Icon과 Label, 내용을 감싸고 있는 Container로 구성돼요.
Properties
Type
Floating Action Button은 Button 타입과 Menu 타입 두 가지로 구분돼요. Button 타입은 클릭하면 즉시 동작이 실행되고, Menu 타입은 클릭하면 메뉴가 펼쳐져요. Menu 타입은 여러 선택 옵션이 필요한 경우에 사용해요.
Enabled 상태에서 두 타입의 형태는 같지만 메뉴가 나타나는 동작이 다르므로 유의해서 사용해요. 메뉴 트리거로 쓸 때는 DropdownMenu.Trigger asChild 로 감싸요.
State
Enabled, Pressed 상태를 가져요. 눌렀을 때와 메뉴가 열려 있을 때 Pressed 색이 적용돼요.
Extended
extended 를 켜면 라벨을 표시해요. 기능을 텍스트로 명확히 표현해 직관성을 높일 수 있어요. extended 여부와 관계없이 label 은 접근성을 위해 필수예요.
Scroll Behavior
Extended 상태의 Floating Action Button은 스크롤을 내리면 라벨을 숨길 수 있어요. 스크롤을 다시 올리면 라벨이 나타나요. 너비·높이·여백이 d4 동안 부드럽게 전환돼요.
Guidelines
Floating Action Button의 위치
Floating Action Button은 화면 우측 하단에 위치해야 하며, 화면 내 주요 액션으로 하나만 존재할 수 있어요.
화면 가장자리로부터 20(x5)의 여백을 두고, 하단에 고정된 요소가 있으면 그 요소를 기준으로 20의 여백을 확보해요. 여러 개의 선택지가 필요하면 Menu 타입을 사용해요.
화면 우측 하단에 하나만 배치해요.
화면에 여러 개를 두거나 중앙에 배치하지 마세요.
Snackbar와의 위치 관계
화면에 Floating Action Button이 있을 때 Snackbar가 나타나면, Snackbar는 항상 Floating Action Button 위에 표시돼요.
Label
Extended 옵션을 사용하면 텍스트로 기능을 명시해 직관성을 높일 수 있어요. 라벨이 너무 길어지지 않도록 주의해요.
짧고 명확한 라벨을 사용해요.
라벨이 길어지지 않게 주의해요.
Color
Floating Action Button은 화면에서 가장 중요한 액션을 나타내며, 하나만 표시할 수 있고 색상을 바꿀 수 없어요. 중요도가 낮은 보조 액션을 표현할 때는 Contextual Floating Button을 사용해요.
Props
Prop
Type