Floating Action Button

Anatomy

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

Properties

Type

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

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

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

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

State

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

Extended Property

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

Scroll Behavior

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

Guidelines

Floating Action Button의 위치

Don’t

우측 하단에 위치해야 합니다.

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

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

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

Snackbar와의 위치 관계

화면에 Floating Action Button이 있을 때 Snackbar가 나타나면, Snackbar는 항상 Floating Action Button 위에 표시됩니다.

Label

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

Color

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

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

Floating Action Button V3 변경점

• Floating Action Button, Extended FAB, Main FAB로 구분되어 있던 컴포넌트를 용례에 따라 **Floating Action Button, Contextual Floating Button**으로 새롭게 구분했습니다.
• Floating Action Button은 Brand Tone, 단일 사이즈만 제공하며 화면에 하나만 존재할 수 있습니다.
• 보조적인 역할을 하는 떠 있는 버튼은 Contextual Floating Button으로 용례를 구분했습니다.

Specification

base

상태	슬롯	속성	값
enabled	root	color	$color.bg.brand-solid
		cornerRadius	$radius.full
		shadow	$shadow.s3
		colorDuration	$duration.color-transition
		colorTimingFunction	$timing-function.easing
		layoutDuration	$duration.d4
		layoutTimingFunction	$timing-function.easing
	icon	color	$color.palette.static-white
		sizeDuration	$duration.d4
		sizeTimingFunction	$timing-function.easing
pressed	root	color	$color.bg.brand-solid-pressed

extended=true

상태	슬롯	속성	값
enabled	root	gap	$dimension.x1
		paddingX	$dimension.x4_5
		paddingY	$dimension.x3
		minHeight	48px
	icon	size	$dimension.x5
	label	color	$color.palette.static-white
		fontSize	$font-size.t5
		lineHeight	$line-height.t5
		fontWeight	$font-weight.bold

extended=false

상태	슬롯	속성	값
enabled	root	size	56px
	icon	size	$dimension.x6