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

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

## Anatomy

![Contextual Floating Button의 Anatomy 이미지. Container, Icon, Label로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/809afc11-094c-45ad-a9ba-167cc8a5ba2e)

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/cbd8a85f-7352-483a-8ca8-129697235fd1)

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/575489e4-6bca-49ae-82b5-ce75498a69a5)

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/e4c374b7-8033-4c2e-99a8-d1875dfbbf15)

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

## Guidelines

### Contextual Floating Button의 사용

![Contextual Floating Button 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d9b93b19-d25d-46f2-94fb-c2c2b18306f0)

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/8bec2ff0-5a8f-4072-844d-c82dd3da7fc8)

![Contextual Floating Button과 고정 요소와의 여백](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/73455b98-9c2c-467d-ba9d-f917144fd10c)

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

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

### Tone

![Contextual Floating Button의 Tone 사용 예시 - Solid와 Layer](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a6b9e74d-d08c-49db-a4e7-83a34bcfa024)

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

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

### Label의 길이

![Contextual Floating Button의 Label 길이 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/05a5eb8d-8e65-4f5e-a7fd-1e7b0f02c619)

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

## Specification

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