Page Banner

페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다.

Figma

Done

iOS

Not Ready

Android

Not Ready

개요

옵션 테이블

속성	값	기본값
type	display, actionable, dismissible	display
tone	neutral, positive, informative, warning, critical	neutral
variant	weak, solid	weak
prefix icon	icon
title	string
description	string
button label	string

스펙

base

상태	슬롯	속성	값
enabled	root	paddingX	$dimension.x4
		paddingY	$dimension.x2_5
		minHeight	$dimension.x10
	prefixIcon	size	$dimension.x4
		marginRight	$dimension.x2
	content	gap	$dimension.x1_5
	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.medium
	button	targetHeight	$dimension.x10
		fontSize	$font-size.t3
		lineHeight	$line-height.t3
		fontWeight	$font-weight.bold
	suffixIcon	size	$dimension.x4
		targetSize	$dimension.x10
		marginLeft	$dimension.x2

tone=neutral, variant=weak

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

tone=neutral, variant=solid

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

tone=positive, variant=weak

상태	슬롯	속성	값
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
	button	color	$color.fg.positive-contrast
	suffixIcon	color	$color.fg.positive-contrast
pressed	root	color	$color.bg.positive-weak-pressed

tone=positive, variant=solid

상태	슬롯	속성	값
enabled	root	color	$color.bg.positive-solid
	prefixIcon	color	$color.palette.static-white
	title	color	$color.palette.static-white
	description	color	$color.palette.static-white
	button	color	$color.palette.static-white
	suffixIcon	color	$color.palette.static-white
pressed	root	color	$color.bg.positive-solid-pressed

tone=informative, variant=weak

상태	슬롯	속성	값
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
	button	color	$color.fg.informative-contrast
	suffixIcon	color	$color.fg.informative-contrast
pressed	root	color	$color.bg.informative-weak-pressed

tone=informative, variant=solid

상태	슬롯	속성	값
enabled	root	color	$color.bg.informative-solid
	prefixIcon	color	$color.palette.static-white
	title	color	$color.palette.static-white
	description	color	$color.palette.static-white
	button	color	$color.palette.static-white
	suffixIcon	color	$color.palette.static-white
pressed	root	color	$color.bg.informative-solid-pressed

tone=warning, variant=weak

상태	슬롯	속성	값
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
	button	color	$color.fg.warning-contrast
	suffixIcon	color	$color.fg.warning-contrast
pressed	root	color	$color.bg.warning-weak-pressed

tone=warning, variant=solid

상태	슬롯	속성	값
enabled	root	color	$color.bg.warning-solid
	prefixIcon	color	$color.palette.static-black-alpha-900
	title	color	$color.palette.static-black-alpha-900
	description	color	$color.palette.static-black-alpha-900
	button	color	$color.palette.static-black-alpha-900
	suffixIcon	color	$color.palette.static-black-alpha-900
pressed	root	color	$color.bg.warning-solid-pressed

tone=critical, variant=weak

상태	슬롯	속성	값
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
	button	color	$color.fg.critical-contrast
	suffixIcon	color	$color.fg.critical-contrast
pressed	root	color	$color.bg.critical-weak-pressed

tone=critical, variant=solid

상태	슬롯	속성	값
enabled	root	color	$color.bg.critical-solid
	prefixIcon	color	$color.palette.static-white
	title	color	$color.palette.static-white
	description	color	$color.palette.static-white
	button	color	$color.palette.static-white
	suffixIcon	color	$color.palette.static-white
pressed	root	color	$color.bg.critical-solid-pressed

tone=magic, variant=weak

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

Last updated on

Notification Badge

Notification Badge는 사용자에게 읽지 않은 알림이나 상태 변경 정보를 시각적으로 전달하기 위해 사용됩니다.

Progress Circle

작업이 진행 중임을 알리거나 작업 시간을 시각적으로 나타내는 데 사용됩니다.

On this page

개요 옵션 테이블 스펙