Alert

현재 화면 위에 창을 띄워, 사용자의 흐름을 잠시 멈추고 주의할 내용을 안내하는 컴포넌트입니다. 사용자가 반드시 확인하고 넘어가야 하는 주요한 상황에 사용합니다.

Anatomy

  1. 1Scrim
  2. 2Container
  3. 3Heading
  4. 4Body
  5. 5Action

Variants

Heading

Body

Heading
Action

Size

Without heading

메시지가 짧고 명확해 Heading이 불필요하게 반복된다고 느껴질 때 Heading을 제외하고 Body만 사용할 수 있습니다.

Dimmer

Dimmer는 각 플랫폼에서 시스템 순정과 동일하게 사용합니다.

Accessibility

KeyDescription
Tab다음 요소로 포커스를 이동합니다. (Alert 내부에서 순환)
Shift + Tab이전 요소로 포커스를 이동합니다. (Alert 내부에서 순환)
Enter현재 포커스된 요소를 클릭합니다.
EscapeAlert을 닫고 이전 요소로 포커스를 이동합니다.

Mobile

Android

Android에서는 시스템 순정 Dialog를 래핑한 커스텀 컴포넌트를 사용합니다.

iOS

iOS에서는 시스템 순정 Alert을 사용합니다.

Usage

Distinction from popup

Popup과 달리, 사용자의 주의가 즉시 필요한 경고나 되돌릴 수 없는 행동에 대한 확인을 받을 때 제한적으로 사용합니다.

Action types

Action은 보조 행동, 권장 행동, 부정 행동 세 가지 유형으로 사용할 수 있습니다.

  • 권장 행동은 주요한 작업을 강조할 때 사용하며, 보조 행동과 함께 쓸 때 우측에 배치합니다.
  • 보조 행동은 현재 과업을 중단하거나 Alert를 닫는 등 권장 행동의 반대 역할을 하는 보조적인 행동입니다.
  • 부정 행동은 삭제, 탈퇴 등 되돌릴 수 없는 위험한 행동에 사용하며, 보조 행동과 함께 쓸 때 우측에 배치합니다.

How to use

Do

일어날 동작에 대해 명확히 인지할 수 있도록 액션을 명확히 작성합니다.

Don’t

동일한 동작을 하는 버튼을 중복해서 배치하지 않습니다.

© 2026 Wanted Lab, Inc.