7onicDESIGN SYSTEM

Alert

Alert는 사용자에게 중요한 정보나 피드백을 전달하는 알림 컴포넌트입니다. 상태에 맞는 아이콘과 색상을 자동으로 적용하여 정보, 성공, 경고, 오류 메시지를 표현합니다.

3
Variants
3
Sizes
4
Colors
Pure
React

Playground

Preview
defaultinfo
Heads up!

You can add components to your app using the CLI.

Variant
Color
Size
Options
<Alert>
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description>
    You can add components to your app using the CLI.
  </Alert.Description>
</Alert>

Variants

Alert
Default
얇은 보더가 있는 틴트 배경의 기본 알림 스타일
일반 알림
Alert
Outline
배경 없이 보더만 사용하는 가벼운 스타일
가벼운 주의
Alert
Filled
강한 시각적 강조가 필요할 때 사용하는 솔리드 배경 스타일
중요한 경고

Sizes

sm
패딩12px
타이틀13px
설명12px
아이콘16px
default
패딩16px
타이틀14px
설명13px
아이콘18px
lg
패딩20px
타이틀16px
설명14px
아이콘20px

Colors

Information

A new software update is available. See what's new in version 3.0.

Success

Your changes have been saved successfully.

Warning

Your trial period will expire in 3 days.

Features

Closable

closable을 활성화하면 닫기 버튼이 표시됩니다.onClose로 콜백을 받을 수 있습니다.

Saved!

Your changes have been saved.

<Alert color="success" closable onClose={() => setVisible(false)}>
  <Alert.Title>Saved!</Alert.Title>
  <Alert.Description>Your changes have been saved.</Alert.Description>
</Alert>

Custom Icon

icon으로 커스텀 아이콘을 설정하고,hideIcon으로 아이콘을 숨길 수 있습니다.

New feature available!

Check out the latest updates.

Simple message without icon

This alert has no icon.

{/* Custom icon */}
<Alert icon={<Rocket className="icon-md" />}>
  <Alert.Title>New feature!</Alert.Title>
</Alert>

{/* No icon */}
<Alert hideIcon>
  <Alert.Title>Simple message</Alert.Title>
</Alert>

Variant × Color Matrix

3가지 variant와 4가지 color의 전체 12가지 조합

default

Info

This is a default info alert.

Success

This is a default success alert.

Warning

This is a default warning alert.

outline

Info

This is a outline info alert.

Success

This is a outline success alert.

Warning

This is a outline warning alert.

filled

Info

This is a filled info alert.

Success

This is a filled success alert.

Warning

This is a filled warning alert.

API

Component Structure

Alert— Pure React
.Title.Description

Props

Alert (Root)

variant"default"
"default" | "outline" | "filled"

외관 variant (default: 틴트 배경, outline: 보더, filled: 솔리드)

color"info"
"info" | "success" | "warning" | "error"

시맨틱 컬러 (아이콘, 색상, ARIA 역할을 자동으로 결정)

size"default"
"sm" | "default" | "lg"

사이즈 (패딩, 폰트, 아이콘을 일괄 제어)

closablefalse
boolean

닫기 버튼 표시 여부

onCloseundefined
() => void

닫기 버튼 콜백

closeIconundefined
ReactNode

커스텀 닫기 아이콘

iconauto (by color)
ReactNode

커스텀 상태 아이콘

hideIconfalse
boolean

아이콘 숨김 여부

radius"lg"
"none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

모서리 둥글기

Alert.Title

childrenundefined
ReactNode

타이틀 텍스트

classNameundefined
string

추가 CSS 클래스

Alert.Description

childrenundefined
ReactNode

설명 텍스트

classNameundefined
string

추가 CSS 클래스

Anatomy

1
2
3
4
5
1
Root
알림 컨테이너
2
Icon
상태 아이콘
3
Title
타이틀
4
Description
설명 텍스트
5
Close
닫기 버튼

Best Practices

✓

권장

  • ✓상태에 맞는 color를 사용하세요.
  • ✓타이틀과 설명으로 메시지를 간결하게 전달하세요.
  • ✓일시적인 알림에는 closable을 사용하세요.
✕

지양

  • ✕한 페이지에 Alert를 너무 많이 표시하지 마세요.
  • ✕심각한 오류에는 default variant 대신 filled를 사용하세요.
  • ✕일시적인 알림에는 Alert 대신 Toast를 사용하세요.
  • ✕사용자 확인이 필요한 경우 Alert 대신 Modal을 사용하세요.

Alert vs Toast

둘 다 사용자 알림에 사용하지만, 표시 지속성과 인터랙션이 다릅니다.

표시

Alert: 페이지 내 고정 (영속적)

Toast: 일시적으로 표시되다 자동으로 사라짐

트리거

Alert: 페이지 로드 시 또는 상태 변화 시

Toast: 사용자 액션 후 피드백으로 표시

콘텐츠

Alert: 타이틀 + 설명 (리치)

Toast: 짧은 메시지 (1~2줄)

닫기

Alert: 수동 (closable) 또는 항상 표시

Toast: 자동 제거 (몇 초 후)

용도

Alert: 시스템 상태, 경고, 오류

Toast: 저장 완료, 복사 완료 등

ARIA

Alert: role="alert" / role="status"

Toast: role="status" + aria-live

사용 구분 기준: Alert는 페이지 내 상태 알림에 사용합니다. 사용자 액션에 대한 일시적인 피드백에는 Toast를 사용하세요.

Accessibility

ARIA / WCAG

  • role="alert" error 시 자동 부여
  • role="status" info/success/warning 시 자동 적용
  • 닫기 버튼에 aria-label="Close"
  • 장식 아이콘에 aria-hidden="true"