Alerts & Notifications
알림은 사용자에게 시스템 상태나 작업 결과를 전달하는 컴포넌트입니다. Alert는 페이지 안에 인라인으로 배치되어 정보를 알리고, Notification은 토스트 카드 형태로 일시적으로 떠 있다가 사라집니다.
Figma 컴포넌트: Alert, Notification
Alert
Floating
페이지 안에 인라인으로 배치하는 카드 형태입니다. 6가지 컬러 변형이 있습니다.
Without actions
actions를 생략하면 텍스트만 표시됩니다.
Without dismiss
dismissible={false}로 닫기 버튼을 숨길 수 있습니다.
Full-width
페이지 상단에 가로 전체로 깔리는 형태입니다. 시스템 안내, 공지에 적합합니다.
Notification
토스트 형태의 카드 알림입니다. 어두운 배경에 흰색 텍스트로 강조하여 표시합니다.
Type variants
Avatar
type="avatar"로 사용자 프로필을 보여줄 수 있습니다.
No icon
Props
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
color | 'default' | 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'default' | 컬러 variant |
size | 'floating' | 'full-width' | 'floating' | 카드 형태 (인라인) 또는 가로 전체 |
title | string | - | 제목 |
description | string | - | 설명 텍스트 |
icon | ReactNode | color별 기본 SVG | Featured icon에 표시할 아이콘 |
actions | ReactNode | - | 하단 액션 영역 (링크 또는 버튼) |
dismissible | boolean | true | 닫기 버튼 표시 여부 |
onDismiss | () => void | - | 닫기 콜백 |
Notification
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'primary' | 'success' | 'warning' | 'error' | 'gray' | 'avatar' | 'no-icon' | 'primary' | 아이콘/스타일 변형 |
title | string | - | 제목 |
description | string | - | 설명 텍스트 |
icon | ReactNode | type별 기본 solid 아이콘 | 커스텀 아이콘 |
avatarSrc | string | - | type=avatar일 때 사용할 이미지 URL |
actions | ReactNode | - | 하단 액션 링크 영역 |
dismissible | boolean | true | 닫기 버튼 표시 여부 |
onDismiss | () => void | - | 닫기 콜백 |
Figma Variants
Alert
| Property | Values |
|---|---|
| Color | Default Brand Gray Error Warning Success |
| Size | Floating Full-width |
| Breakpoint | Desktop Mobile |
Notification
| Property | Values |
|---|---|
| Type | Primary icon Success icon Warning icon Error icon Gray icon Avatar No icon Image Progress indicator |
| Breakpoint | Desktop Mobile |