# Floating Action Button
URL: /components/floating-action-button
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/floating-action-button.mdx

화면 상에 떠 있으며 주요 액션을 실행하는 버튼입니다.

## Anatomy

![Floating Action Button의 Anatomy 이미지. Icon, Label, Container로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/65880471-a565-49bf-a554-583efe48ec05)

Floating Action Button는 Icon과 Label, 내용을 감싸고 있는 Container로 구성되어 있습니다.

## Properties

### Type

![Floating Action Button의 Type - Button Type](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/92ba9876-7514-4478-aa41-874f4b75fc51)

![Floating Action Button의 Type - Menu Type](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c7b8116b-8145-44fe-8b01-be0ee212f273)

Floating Action Button은 Button 타입과 Menu 타입 두 가지로 구분됩니다.

Button 타입은 클릭 시 즉시 동작이 실행되고, Menu 타입은 클릭하면 메뉴가 펼쳐집니다.

Menu 타입은 Floating Action Button에 여러 선택 옵션이 필요한 경우에 사용합니다.

Enabled 상태에서 두 타입의 형태가 동일하지만, 메뉴가 나타나는 동작이 다르므로 유의해서 사용해주세요.

### State

![Floating Action Button의 State - Enabled, Pressed](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c3d4b79f-c222-415e-a230-d5ef48a124d2)

Floating Action Button은 Enabled, Pressed 상태를 가집니다.

### Extended Property

![Floating Action Button의 Extended Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0534a8e8-b7b8-4b69-a144-b33365f83617)

Extended Property를 켜면 텍스트를 표시할 수 있습니다. 이를 통해 기능을 텍스트로 명확히 표현하여 직관성을 높일 수 있습니다.

### Scroll Behavior

![Floating Action Button의 Scroll Behavior](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/3a506fab-b5fc-4470-9100-73c0aafc9a0f)

Extended 상태의 Floating Action Button은 스크롤을 내릴 경우 라벨을 숨길 수 있습니다. 스크롤을 다시 올릴 경우 라벨이 나타납니다.

## Guidelines

### Floating Action Button의 위치

![화면 우측 가장자리와 하단 고정 요소로부터 20의 여백을 둔 Floating Action Button 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c13fdbbc-662f-4b3a-9543-995d95c6fdf6)

<DontImage body="우측 하단에 위치해야 합니다." alt="Floating Action Button이 화면 중앙에 위치한 예시" />

<DontImage body="화면에 하나만 존재할 수 있습니다." alt="화면에 여러 개의 Floating Action Button이 존재하는 예시" />

![여러 선택지를 Menu Type으로 제공한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f7ddfe6d-de03-46c0-a56a-39c9d32ea9b9)

Floating Action Button은 화면 우측 하단에 위치해야 하며, 화면 내 주요 액션으로 하나만 존재할 수 있습니다.

화면 가장자리로부터 20의 여백을 두어야 하며, 하단에 고정된 요소가 있는 경우 고정된 요소를 기준으로 20의 여백을 확보해야 합니다.

여러개의 선택지가 필요한 경우 Menu Type을 사용할 수 있습니다.

### Snackbar와의 위치 관계

![Floating Action Button과 Snackbar의 위치 관계](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c8fc5f6e-339e-4044-9e58-a867a1ad6db6)

화면에 Floating Action Button이 있을 때 [Snackbar](/components/snackbar)가 나타나면, Snackbar는 항상 Floating Action Button 위에 표시됩니다.

### Label

![Floating Action Button의 레이블로 '글쓰기'를 사용한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7d18fdeb-8ff4-4ed1-873f-5cb36b6f7fd1)

<DontImage body="Label이 길어지지 않게 주의해주세요." alt="Floating Action Button의 레이블로 '여러 물건 올리기'를 사용한 예시" />

Extended 옵션을 사용하면 텍스트로 기능을 명시함으로써 직관성을 높일 수 있습니다. 텍스트 라벨이 너무 길어지지 않도록 주의해서 사용해주세요.

### Color

![Floating Action Button의 색상을 있는 그대로 사용한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b52444d5-7e69-43ee-8ee8-a5a735b75c34)

<DontImage body="색상을 변경할 수 없습니다." alt="Floating Action Button의 색상을 변경한 예시" />

Floating Action Button은 화면 내에서 가장 중요한 액션을 나타내며, 하나만 표시할 수 있고 색상 변경이 불가능합니다.

중요도가 낮은 보조적인 액션(White, Neutral 등)을 표현할 때는 [Contextual Floating Button](/components/contextual-floating-button)을 사용해주세요.

## Specification

Component spec (JSON): /rootage/components/floating-action-button.json