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

화면 위에 떠 있으며 특정 상황에서만 나타나는 보조적인 동작을 위한 버튼입니다.

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

## Anatomy

![Contextual Floating Button의 Anatomy 이미지. Container, Icon, Label로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/74790afd-f46e-4bf7-ab4b-f746038b41da)

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

## Properties

### Tone

![Contextual Floating Button의 Tone Property - Solid, Layer](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/13a86d58-9e13-49a4-8237-de4c40603a1e)

Contextual Floating Button은 Solid와 Layer 두 가지 스타일을 가집니다. 시각적인 주목도에 따라 사용할 수 있습니다.

### Layout

![Contextual Floating Button의 Layout Property - Icon First, Icon Only](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8485d1ac-97fe-45e6-a636-52127b795662)

Layer 스타일의 Contextual Floating Button은 Icon Only 레이아웃을 사용할 수 있습니다.

### State

![Contextual Floating Button의 State - Enabled, Pressed, Loading, Disabled](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/dd2a48be-a0fd-4f29-988a-86becd7c4cdb)

Enabled, Pressed, Loading, Disabled 상태를 가집니다.

## Guidelines

### Contextual Floating Button의 사용

![Contextual Floating Button 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d3849b21-8f27-4d01-8370-4dbdd48df3d4)

Contextual Floating Button은 화면 위에 떠있고, 조건적으로 노출되는 보조 액션 버튼입니다.

화면의 주 액션을 담당하는 [Floating Action Button](/components/floating-action-button)과 달리, 특정 문맥 또는 사용자 상호작용에 따라 유동적으로 등장합니다.

### Contextual Floating Button의 위치

![Contextual Floating Button의 위치 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/672d29f6-ca36-4196-9acd-8bd5d3f347df)

![Contextual Floating Button과 고정 요소와의 여백](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2e792b72-165e-484e-ab51-dab7440f215d)

Contextual Floating Button은 고정된 위치에 있지 않고, 콘텐츠 근처에 자유롭게 배치될 수 있는 유연성을 가집니다. 또한 한 화면 내에서 여러 개의 버튼을 동시에 표시할 수 있습니다.

화면 내 고정된 요소가 있는 경우 고정된 요소를 기준으로 여백을 확보해야 합니다.

### Tone

![Contextual Floating Button의 Tone 사용 예시 - Solid와 Layer](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/48592118-f4fb-4657-985d-fa0983dd5bd2)

Contextual Floating Button은 Solid와 Layer 두 가지 스타일을 가집니다. 상황에 따라 선택해서 사용할 수 있습니다.

| Tone      | 사용 상황                                                       |
| --------- | ----------------------------------------------------------- |
| **Solid** | 배경과 대비되는 강조된 보조 액션으로 중요도 높거나 컨텍스트와 강하게 연결된 행동 유도 시 적합합니다.   |
| **Layer** | 시각적 부담 없이 부드럽게 액션을 유도합니다. 인라인 흐름에 잘 녹아들고 지나친 주목을 피할 수 있습니다. |

### Label의 길이

![Contextual Floating Button의 Label 길이 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/40d26f7d-a0ef-4f03-91ff-9e4c89f5e957)

Label이 길어질 경우 줄바꿈 됩니다. 한 줄에 표시될 수 있도록 간결하게 유지해주세요.

## Specification

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