Components

Extended FAB

사용자가 특정 액션을 실행할 수 있도록 도와주는 컴포넌트입니다.

개요

옵션 테이블

속성	값	기본값
size	small, medium	medium
variant	neutral solid, layer floating	neutral solid
prefix icon	icon

링크

React

Extended FAB 컴포넌트를 React로 사용하는 방법을 설명합니다.

스펙

base

상태	슬롯	속성	값
enabled	root	cornerRadius	$radius.full
		shadow	0px 2px 6px 0px #00000026

variant=neutralSolid

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-inverted
	label	color	$color.fg.neutral-inverted
	prefixIcon	color	$color.fg.neutral-inverted
pressed	root	color	$color.bg.neutral-inverted-pressed

variant=layerFloating

상태	슬롯	속성	값
enabled	root	color	$color.bg.layer-floating
	label	color	$color.fg.neutral
	prefixIcon	color	$color.fg.neutral
pressed	root	color	$color.bg.layer-floating-pressed

size=small

상태	슬롯	속성	값
enabled	root	minHeight	40px
		gap	$dimension.x1
		paddingX	$dimension.x3_5
		paddingY	$dimension.x2_5
	prefixIcon	size	16px
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.medium

size=medium

상태	슬롯	속성	값
enabled	root	minHeight	48px
		gap	$dimension.x1
		paddingX	$dimension.x4
		paddingY	$dimension.x3
	prefixIcon	size	16px
	label	fontSize	$font-size.t5
		lineHeight	$line-height.t5
		fontWeight	$font-weight.bold

Extended Action Sheet

Extended Action Sheet는 사용자가 특정 작업에 관한 선택지뿐만 아니라 추가적인 선택지를 제공할 때 사용하는 시트 형태의 컴포넌트입니다.

FAB

사용자가 특정 액션을 실행할 수 있도록 도와주는 컴포넌트입니다.