Callout

사용자의 주목을 끌어 중요한 정보를 강조하는 컴포넌트입니다.

Figma

Done

iOS

Done

Android

Done

개요

옵션 테이블

속성	값	기본값
interaction	default, actionable, dismissible
tone	neutral, informative, warning, critical, magic	neutral
prefix icon	icon
suffix icon	icon
title	string
description	string
link label	string

스펙

base

상태	슬롯	속성	값
enabled	root	paddingX	$dimension.x3_5
		paddingY	$dimension.x3_5
		gap	$dimension.x3
		cornerRadius	$radius.r2_5
		minHeight	50px
	prefixIcon	size	$dimension.x4
	title	fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.bold
	description	fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.regular
	link	fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.regular
	suffixIcon	size	$dimension.x4
		targetSize	$dimension.x10

tone=neutral

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-weak
	prefixIcon	color	$color.fg.neutral
	title	color	$color.fg.neutral
	description	color	$color.fg.neutral
	link	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral
pressed	root	color	$color.bg.neutral-weak-pressed

tone=informative

상태	슬롯	속성	값
enabled	root	color	$color.bg.informative-weak
	prefixIcon	color	$color.fg.informative-contrast
	title	color	$color.fg.informative-contrast
	description	color	$color.fg.informative-contrast
	link	color	$color.fg.informative-contrast
	suffixIcon	color	$color.fg.informative-contrast
pressed	root	color	$color.bg.informative-weak-pressed

tone=positive

상태	슬롯	속성	값
enabled	root	color	$color.bg.positive-weak
	prefixIcon	color	$color.fg.positive-contrast
	title	color	$color.fg.positive-contrast
	description	color	$color.fg.positive-contrast
	link	color	$color.fg.positive-contrast
	suffixIcon	color	$color.fg.positive-contrast
pressed	root	color	$color.bg.positive-weak-pressed

tone=warning

상태	슬롯	속성	값
enabled	root	color	$color.bg.warning-weak
	prefixIcon	color	$color.fg.warning-contrast
	title	color	$color.fg.warning-contrast
	description	color	$color.fg.warning-contrast
	link	color	$color.fg.warning-contrast
	suffixIcon	color	$color.fg.warning-contrast
pressed	root	color	$color.bg.warning-weak-pressed

tone=critical

상태	슬롯	속성	값
enabled	root	color	$color.bg.critical-weak
	prefixIcon	color	$color.fg.critical-contrast
	title	color	$color.fg.critical-contrast
	description	color	$color.fg.critical-contrast
	link	color	$color.fg.critical-contrast
	suffixIcon	color	$color.fg.critical-contrast
pressed	root	color	$color.bg.critical-weak-pressed

tone=magic

상태	슬롯	속성	값
enabled	root	gradient	$gradient.glow-magic
	prefixIcon	color	$color.fg.neutral
	title	color	$color.fg.neutral
	description	color	$color.fg.neutral
	link	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral
pressed	root	gradient	$gradient.glow-magic-pressed

Last updated on

Bottom Sheet

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

Checkbox

사용자가 하나 이상의 옵션을 선택할 수 있게 해주는 컴포넌트입니다. 목록에서 여러 항목을 선택하거나 약관 동의와 같은 선택적 작업에 사용됩니다.

On this page

개요 옵션 테이블 스펙