Dialog
Dialog는 페이지 위에 창을 띄워 사용자를 중요한 정보에 집중시키거나, 특정 작업을 수행하도록 강제하는 컴포넌트입니다.Anatomy
- Backdrop
- Title
- Description — Optional
- Content — Optional
- Assistive button — Optional
- Close button
- Action button
Examples
커스텀이 필요할 때 사용하세요
원하는 데이터를 충분히 표현하기 어렵다면 Custom dialog를 사용하세요.
작업과 관련된 정보를 제공할 때 사용하세요 (Assistive button)
주요 동작(Action button) 이외에 사용자의 행동을 보조하는 기능을 제공합니다. 닫기 버튼으로 사용하지 않습니다.
작업과 관련된 정보를 제공할 때 사용하세요 (Scroll)
작업과 관련된 정보를 제공합니다. 정해진 높이(Max-height)를 넘길 경우 스크롤을 제공합니다.
사용자의 정보 입력이 필요할 경우 사용하세요
페이지를 벗어나지 않고 사용자로부터 입력을 받습니다. 다음 단계를 진행하기 위해 사용자의 입력 값이 필수적으로 필요한 경우 사용합니다.
Best practices
Scroll
Close button
Button label
Title
Patterns
Dialog에서 발생한 오류는 인라인 메시지를 사용해 알리세요
Dialog에서 발생한 오류는 인라인 메시지로 알립니다. Alert dialog나 Toast를 사용하지 마세요.
Guidelines
Height
Dialog의 최대 높이(Max-height)는 전체 화면 높이의 80%로 설정됩니다.
Close behavior
- Close button: Dialog는 헤더의 Close 버튼으로 닫을 수 있습니다.
- Backdrop 클릭 / ESC: 배경을 클릭하거나 키보드 ESC를 눌러 Dialog를 닫을 수 있습니다.
Scroll behavior
