Components

Inline Banner

사용자가 꼭 알아야 하는 경고 메시지나 현재 상태를 전달하는 컴포넌트입니다.

개요

옵션 테이블

속성	값	기본값
type	default, link, actionable, dismissible
variant	neutral weak, positive weak, informative weak, warning weak, warning solid, critical weak, critical solid	neutral weak
icon	icon
title	string
description	string
link label	string

링크

React

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

스펙

base

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

variant=neutralWeak

상태	슬롯	속성	값
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

variant=positiveWeak

상태	슬롯	속성	값
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

variant=informativeWeak

상태	슬롯	속성	값
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

variant=warningWeak

상태	슬롯	속성	값
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

variant=warningSolid

상태	슬롯	속성	값
enabled	root	color	$color.bg.warning-solid
	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

variant=criticalWeak

상태	슬롯	속성	값
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

variant=criticalSolid

상태	슬롯	속성	값
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
	link	color	$color.palette.static-white
	suffixIcon	color	$color.palette.static-white

Help Bubble

Help Bubble은 사용자에게 컴포넌트의 상태나 특정 기능에 대한 추가 정보를 제공하는 부가적인 도움말 컴포넌트입니다.

Link Content

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.