Bottom Sheet

화면 하단에서 올라오는 모달 컴포넌트입니다. 추가 정보나 액션 목록을 제공하면서도 현재 컨텍스트를 유지할 때 사용됩니다.

Figma

Done

iOS

Done

Android

Done

개요

속성	값	기본값
title	string
description	string

상태	슬롯	속성	값
enabled	backdrop	color	$color.bg.overlay
		enterDuration	$duration.d6
		enterTimingFunction	$timing-function.enter
		enterOpacity	0
		exitDuration	$duration.d4
		exitTimingFunction	$timing-function.exit
		exitOpacity	0
	content	color	$color.bg.layer-floating
		maxWidth	640px
		topCornerRadius	$radius.r6
		enterDuration	$duration.d6
		enterTimingFunction	$timing-function.enter-expressive
		exitDuration	$duration.d4
		exitTimingFunction	$timing-function.exit
	header	gap	$dimension.x2
		paddingTop	$dimension.x6
		paddingBottom	$dimension.x4
	body	paddingX	$dimension.spacing-x.global-gutter
	footer	paddingX	$dimension.spacing-x.global-gutter
		paddingTop	$dimension.x3
		paddingBottom	$dimension.x4
	title	color	$color.fg.neutral
		fontSize	$font-size.t8
		lineHeight	$line-height.t8
		fontWeight	$font-weight.bold
	description	color	$color.fg.neutral-muted
		fontSize	$font-size.t5
		lineHeight	$line-height.t5
		fontWeight	$font-weight.regular
	closeButton	fromTop	$dimension.x5
		fromRight	$dimension.x5

상태	슬롯	속성	값
enabled	header	paddingLeft	$dimension.spacing-x.global-gutter
		paddingRight	50px

상태	슬롯	속성	값
enabled	header	paddingLeft	50px
		paddingRight	50px