Modal

하나의 일에 집중하는 대화상자.

출시 화면에서 사용

개요

미리보기

예시 언어동작 줄이기

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

open

size

presentation

title

children

primaryLabel

cancelLabel

busy

error

dirtycloseOnBackdrop

예시

상태

열림
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
작게
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
크게
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
처리 중
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
오류
출처 이름 바꾸기
Error지금 저장하지 못했어요. 입력한 내용은 그대로 있어요.
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
긴 본문
출처 이름 바꾸기
이 이름은 Centralby 화면에서만 쓰여요. 목록, 상세, 근거 묶음의 출처 줄에 같은 이름이 보여요. Gmail이나 Google Calendar의 계정 이름은 바뀌지 않아요. 이름을 비우면 원래 계정 주소를 다시 보여줘요. 이 설명은 본문만 스크롤되는 긴 내용 상태를 보여주려고 길게 썼어요. 머리와 바닥은 그대로 남아요.
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
시트 표시
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
가장 긴 문구 (es)
Google Calendar 출처의 표시 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.

쓰임 예

입력 중 닫기 → 확인
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.

이렇게 · 이렇게 하지 않기

이렇게 작업을 끊어도 될 만큼 중요한 일에만 쓴다. 제목은 할 일을 말하고, 입력 중에 닫으면 버릴지 묻는다.
이렇게 하지 않기 가입은 모달이 아니라 /signup 페이지다. 기록 상세도 모달이 아니라 SplitView다.
이렇게 하지 않기 모달 위에 모달을 쌓지 않는다(확인 1단계만). 배경 클릭 닫기를 기본으로 켜지 않는다. 확대(scale) 등장 모션을 쓰지 않는다.

토큰과 속성

이름	타입	기본값	설명
`open?`	`boolean`	`false`	열림. 카탈로그에서 켜면 무대 안에 비모달로 그린다. 실제 showModal·초점 가둠은 트리거로 확인한다.
`size?`	`'sm' \| 'md' \| 'lg'`	`md`	폭 sm 384 · md 528 · lg 720. 더 크면 페이지로 만든다.
`presentation?`	`'auto' \| 'center' \| 'sheet'`	`auto`	auto는 768 이상 가운데, 아래는 바닥 시트.
`title`	`ReactNode`	`출처 이름 바꾸기`	할 일을 말하는 제목(h2). 열면 초점이 여기로 온다(입력 모달은 첫 필드).
`children?`	`ReactNode`		본문. 길면 본문만 스크롤된다.
`primaryLabel?`	`ReactNode`	`저장`	바닥 주요 행동(동사). 비우면 버튼을 그리지 않는다(footer로 직접 준다).
`cancelLabel?`	`ReactNode`		비우면 “취소”.
`busy?`	`boolean`	`false`	제출 중. 주요 버튼 loading, 닫기 버튼과 Esc는 끝날 때까지 무시.
`error?`	`ReactNode`		본문 위 Alert(error)로 보이고 초점을 받는다. 모달은 닫지 않는다.
`dirty?`	`boolean`	`false`	저장 안 된 입력. 닫으려 하면(Esc·닫기·배경) “작성 중인 내용을 버릴까요?”를 먼저 묻는다.
`closeOnBackdrop?`	`boolean`	`false`	배경 클릭으로 닫기. 기본 끔(입력 손실 방지, v3-jh와 다름).
`footer?`	`ReactNode`	—	바닥 버튼 묶음을 직접 준다. primaryLabel·cancelLabel을 대신한다.
`onOpenChange(open, reason)`	—	—	사용자가 닫을 때. reason: close-button · escape · backdrop · action.
`initialFocus`	—	—	열 때 초점 받을 요소의 ref. 입력 모달이면 첫 필드.

개요

미리보기

예시 언어동작 줄이기

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

open

size

presentation

title

children

primaryLabel

cancelLabel

busy

error

dirtycloseOnBackdrop

예시

상태

열림
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
작게
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
크게
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
처리 중
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
오류
출처 이름 바꾸기
Error지금 저장하지 못했어요. 입력한 내용은 그대로 있어요.
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
긴 본문
출처 이름 바꾸기
이 이름은 Centralby 화면에서만 쓰여요. 목록, 상세, 근거 묶음의 출처 줄에 같은 이름이 보여요. Gmail이나 Google Calendar의 계정 이름은 바뀌지 않아요. 이름을 비우면 원래 계정 주소를 다시 보여줘요. 이 설명은 본문만 스크롤되는 긴 내용 상태를 보여주려고 길게 썼어요. 머리와 바닥은 그대로 남아요.
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
시트 표시
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.
가장 긴 문구 (es)
Google Calendar 출처의 표시 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.

쓰임 예

입력 중 닫기 → 확인
출처 이름 바꾸기
Display name
Used on screen only; Gmail is not changed.
Discard what you’ve written?
If you close now, what you entered won’t be saved.

이렇게 · 이렇게 하지 않기

이렇게 작업을 끊어도 될 만큼 중요한 일에만 쓴다. 제목은 할 일을 말하고, 입력 중에 닫으면 버릴지 묻는다.

이렇게 하지 않기 가입은 모달이 아니라 /signup 페이지다. 기록 상세도 모달이 아니라 SplitView다.

이렇게 하지 않기 모달 위에 모달을 쌓지 않는다(확인 1단계만). 배경 클릭 닫기를 기본으로 켜지 않는다. 확대(scale) 등장 모션을 쓰지 않는다.

토큰과 속성

이름	타입	기본값	설명
`open?`	`boolean`	`false`	열림. 카탈로그에서 켜면 무대 안에 비모달로 그린다. 실제 showModal·초점 가둠은 트리거로 확인한다.
`size?`	`'sm' \| 'md' \| 'lg'`	`md`	폭 sm 384 · md 528 · lg 720. 더 크면 페이지로 만든다.
`presentation?`	`'auto' \| 'center' \| 'sheet'`	`auto`	auto는 768 이상 가운데, 아래는 바닥 시트.
`title`	`ReactNode`	`출처 이름 바꾸기`	할 일을 말하는 제목(h2). 열면 초점이 여기로 온다(입력 모달은 첫 필드).
`children?`	`ReactNode`		본문. 길면 본문만 스크롤된다.
`primaryLabel?`	`ReactNode`	`저장`	바닥 주요 행동(동사). 비우면 버튼을 그리지 않는다(footer로 직접 준다).
`cancelLabel?`	`ReactNode`		비우면 “취소”.
`busy?`	`boolean`	`false`	제출 중. 주요 버튼 loading, 닫기 버튼과 Esc는 끝날 때까지 무시.
`error?`	`ReactNode`		본문 위 Alert(error)로 보이고 초점을 받는다. 모달은 닫지 않는다.
`dirty?`	`boolean`	`false`	저장 안 된 입력. 닫으려 하면(Esc·닫기·배경) “작성 중인 내용을 버릴까요?”를 먼저 묻는다.
`closeOnBackdrop?`	`boolean`	`false`	배경 클릭으로 닫기. 기본 끔(입력 손실 방지, v3-jh와 다름).
`footer?`	`ReactNode`	—	바닥 버튼 묶음을 직접 준다. primaryLabel·cancelLabel을 대신한다.
`onOpenChange(open, reason)`	—	—	사용자가 닫을 때. reason: close-button · escape · backdrop · action.
`initialFocus`	—	—	열 때 초점 받을 요소의 ref. 입력 모달이면 첫 필드.

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기