Floating Button (FAB)

개요

사용 목적

• 빠른 접근: 사용자가 현재 화면에서 가장 자주, 가장 중요하게 수행하는 액션에 즉시 접근할 수 있도록 하기 위함
• 빠른 수행: 생성(Create), 시작(Start), 추가(Add)와 같은 전진 지향적 행동을 빠르게 수행
• 반복적 사용: 메뉴 탐색 없이 한 번의 조작으로 액션을 실행

해상도별 사용성 안내

이렇게 활용하세요

✅ 권장 사용 방식

• 전진 액션 설계

  • 생성(Create): 글쓰기, 과제 추가, 프로젝트 생성, 메모 작성, 일정 등록
  • 시작(Start): 새 채팅, 새 문서, 새 녹음
  • 추가(Add): 파일 업로드, 연락처 추가, 지도 핀 등록

• 배열 규칙: 화면당 하나의 FAB만 배치해 명확성 유지

• 인지적 사용성

  • 아이콘 또는 아이콘+라벨만으로 기능이 즉시 인식 가능하도록 설계
  • 모바일에서는 Extended FAB(이름+아이콘)를 기본으로 사용해 가시성과 터치 정확도 향상

• 화면 가시성

  • 스크롤이 많은 모바일 화면에서는 아래로 스크롤 시 숨김, 위로 스크롤 시 표시로 콘텐츠 영역 확보

❌ 비권장 사례

• 파괴적 액션: 삭제, 초기화, 취소에서는 사용하지 않습니다.

• 보조/유틸리티 액션: 정렬, 필터, 더보기, 설정에서는 사용하지 않습니다.

• 제출/확정 액션: 폼 제출, 결제 완료 등에서는 사용하지 않습니다. 이경우에는 하단 고정 Primary 버튼을 사용합니다.

• 인지적 사용성: 한 화면에 2개 이상의 FAB를 배치하지 않습니다. 페이지 간 이동/네비게이션 용도로 사용하지 않습니다.

Variants

Impact

Top Tier

사용자의 즉각적 주의를 끌어 가장 중요한 단일 행동을 유도하는 최상위 위계의 플로팅 버튼입니다. 브랜드 아이덴티티를 강하게 드러내며, 캠페인/핵심 전환 액션 등에서 사용합니다. 화면당 최대 1개만 사용합니다. 하단 내비게이션/바텀 시트와 시각적 경쟁이 나지 않게 배치합니다. 일반 흐름(보조·설정 등)에는 남용 금지.

<FloatingButton color="impact" size="normal" icon={<Add />} />
<FloatingButton color="impact" size="normal" disabled icon={<Add />} />
<FloatingButton color="impact" size="normal" loading icon={<Add />} />

Primary

1순위 위계

서비스 전반에서 주요 기본 액션을 담당하는 기본형 FAB입니다. 일관된 주행동(예: 새로 만들기, 업로드 시작)으로 인지되어야 합니다. 기본은 아이콘 중심 사용. 텍스트가 필요하면 Extended FAB를 별도 사용합니다. 동일 화면 내 보조 FAB와 위계 대비를 유지합니다. 파괴적/경고 의미에는 사용하지 않습니다.

<FloatingButton color="primary" size="normal" icon={<Add />} />
<FloatingButton color="primary" size="normal" disabled icon={<Add />} />
<FloatingButton color="primary" size="normal" loading icon={<Add />} />

White

2순위 위계

배경이 어둡거나 시각 정보가 조밀한 화면에서 침습성을 낮춘 보조 행동에 사용합니다. 주변 콘텐츠를 가리지 않으면서 액션 진입점을 제공합니다. 주 CTA가 따로 있는 화면에서는 보조 용도로만 사용합니다.

<FloatingButton color="white" size="normal" icon={<Add />} />
<FloatingButton color="white" size="normal" disabled icon={<Add />} />
<FloatingButton color="white" size="normal" loading icon={<Add />} />

Success

Positive Status

긍정/완료/확정 계열의 의미를 갖는 플로팅 버튼입니다. 성공 상태로 이어지는 흐름(확정 제출, 승인, 완료 처리 등)에 사용합니다. 의미 체계가 긍정(Positive)일 때만 사용합니다. 삭제/경고/위험 행위에는 사용하지 않습니다(위계·의미 충돌)

<FloatingButton color="success" size="normal" icon={<Add />} />
<FloatingButton color="success" size="normal" disabled icon={<Add />} />
<FloatingButton color="success" size="normal" loading icon={<Add />} />

Sizes

플로팅 버튼은 사용 맥락에 따라 두 가지 사이즈로 제공합니다. 화면 가독성, 터치 영역, UI 밀도 등을 고려해 선택하며, 각 사이즈는 디바이스 환경과 위계에 맞춰 유연하게 적용됩니다.

<FloatingButton size="normal" icon={<Add />} />
<FloatingButton size="mini" icon={<Add />} />

Content Types

플로팅 버튼은 아이콘 사용성을 중심으로 사용됩니다. 맥락에 따라 라벨을 추가한 Extended FAB를 사용하며, 기능 목적과 화면 밀도에 따라 아이콘 배치·라벨 유무를 선택합니다.

<FloatingButton icon={<Add />} />
<FloatingButton icon={<Add />} label="작성하기" />
<FloatingButton label="textOnly" />

Examples

Default

아이콘 전용 기본형 FAB. 화면당 1개만 사용. 하단 우측 고정, 제품 Safe Area 규칙을 준수하고 바텀 UI와 간섭 금지. 필요 시 스크롤 규칙(내릴 때 숨김 / 올릴 때 노출)을 적용.

<FloatingButton color="primary" size="normal" icon={<Add />} />

FAB + Chip

FAB에 상태/카운트를 함께 보여주는 변형(신규/미처리 건수 등). 칩은 우상단에 겹쳐 배치, 숫자는 1–3자리 표기(예: 99+). 색상은 의미 체계(Neutral/Alert/Success)를 따르며, 값이 0이면 표시하지 않음.

<div className="relative">
  <FloatingButton color="primary" size="normal" icon={<Add />} />
  <div className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center">
    99+
  </div>
</div>

Loading State

<FloatingButton loading icon={<Add />} />
<FloatingButton color="primary" loading icon={<Add />} />
<FloatingButton color="success" loading icon={<Add />} />

With Ref

ref를 사용하여 플로팅 버튼에 직접 접근할 수 있습니다.

import { useRef } from 'react';

function FloatingButtonWithRef() {
  const ref = useRef<HTMLButtonElement>(null);
  
  const handleClick = () => {
    console.log(ref.current);
  };
  
  return (
    <FloatingButton ref={ref} onClick={handleClick} icon={<Add />} />
  );
}

Props