Floating Action Button

화면 계층 최상위에 위치해 액션을 일으킬 수 있는 요소입니다.

구조도

  1. Root : Button 컴포넌트를 감싸는 컨테이너 영역 - ButtonPrimitive.Root
  2. Icon : Button에 대한 정보를 전달하는 아이콘

컴포넌트 미리보기

옵션

Size

FAB는 small, medium 2개의 사이즈를 가질 수 있습니다. small이 가장 보편적으로 사용되며, 다른 사이즈는 페이지 내의 중요도가 높은 경우에 제한적으로 사용합니다.

Icon

FAB는 icon을 통해 유저에게 FAB을 클릭하면 발생할 액션에 대한 힌트를 제공합니다. 목적과 컨텍스트에 맞는 의미 전달과 직관성을 고려하여 적절한 아이콘을 선택해야 합니다.

옵션 테이블

속성기본값
sizemedium, smallsmall
iconIcon

상호작용

마우스 클릭 또는 터치로 FAB와 상호작용할 수 있습니다.

키보드

Action

Space 또는 Enter키를 통해 FAB의 액션을 실행시킬 수 있습니다.

가이드라인

Working In Progress

개발 현황