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

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

| Platform | Status |
| --- | --- |
| Figma | Done |
| [React](/react/components/floating-action-button) | Done |
| Lynx | Not Ready |
| iOS | Done |
| Android | Done |

## Anatomy

![Floating Action Button의 Anatomy 이미지. Icon, Label, Container로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/64e0f647-887f-431b-9253-aa3caa659d28)

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/fdb00a9a-fd8b-4e6a-a301-064facec0e58)

![Floating Action Button의 Type - Menu Type](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/bca13199-c863-40b8-bcab-18a33c30430f)

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/d2ef9b0a-41be-4f01-b193-13301ece6134)

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

### Extended Property

![Floating Action Button의 Extended Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0742fd19-7e79-4c2a-8bda-f4466dead242)

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

### Scroll Behavior

![Floating Action Button의 Scroll Behavior](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6e7e615f-ed66-4f63-828f-f313f438bb5f)

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

## Guidelines

### Floating Action Button의 위치

![화면 우측 가장자리와 하단 고정 요소로부터 20의 여백을 둔 Floating Action Button 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8308ef53-3d48-40c2-b1a5-d36669e9a58f)

<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/653dc948-4a2c-4f02-88da-8bd62ab78668)

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

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

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

### Snackbar와의 위치 관계

![Floating Action Button과 Snackbar의 위치 관계](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e8bd3aaa-2b72-44b3-b946-34ad0a62854c)

화면에 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/5a87db90-2513-4756-ad65-5d8e4c7f1d62)

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

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

### Color

![Floating Action Button의 색상을 있는 그대로 사용한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/efba9732-c40c-498f-ae3f-c1f0482bfa46)

<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