AlertDialog

되돌릴 수 없는 동작을 실행하기 전에 한 번 더 물어요. 데이터를 지우거나 작성 중인 글을 버릴 때 써요. 답하지 않고 닫아도 되면 Dialog를 써요.

사용 예시

지우기 전에 묻기

열면 AlertDialogCancel에 포커스가 가요. 바깥을 눌러도 닫히지 않아요.

tsx

<AlertDialog>  <AlertDialogTrigger render={<Button color="neutral" emphasis="outline" />}>앨범 지우기</AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogTitle>앨범을 지울까요?</AlertDialogTitle>      <AlertDialogDescription>        앨범의 사진 128장도 함께 사라져요. 되돌릴 수 없어요.      </AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter>      <AlertDialogCancel>그대로 두기</AlertDialogCancel>      <AlertDialogAction color="danger">앨범 지우기</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

권장

실행 버튼에는 누르면 일어나는 일을 적어요. 질문을 다시 읽지 않아도 버튼만 보고 고를 수 있어요.

지양

예와 아니요는 질문을 다시 읽어야 뜻을 알 수 있어요.

지우지 않는 동작

사라지는 내용이 전혀 없으면 묻지 말고 바로 실행한 뒤 되돌리기 버튼을 보여요.

tsx

<AlertDialog>  <AlertDialogTrigger render={<Button color="neutral" emphasis="outline" />}>순서 되돌리기</AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogTitle>사진 순서를 날짜순으로 되돌릴까요?</AlertDialogTitle>      <AlertDialogDescription>        직접 맞춘 순서가 사라져요. 사진은 그대로 남아요.      </AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter>      <AlertDialogCancel>그대로 두기</AlertDialogCancel>      <AlertDialogAction>날짜순으로 되돌리기</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

권장

지우는 데이터가 없으면 color를 넘기지 않아요.

지양

지우지 않는 동작에도 danger를 쓰면 정말 지울 때 눈에 띄지 않아요.

사라지는 항목 보이기

지울 항목이 여러 개면 목록을 함께 보여요.

tsx

<AlertDialog>  <AlertDialogTrigger render={<Button color="neutral" emphasis="outline" />}>고른 앨범 지우기</AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogTitle>앨범 3개를 지울까요?</AlertDialogTitle>      <AlertDialogDescription>        아래 <strong className="text-fg">3개</strong>가 사라져요.      </AlertDialogDescription>    </AlertDialogHeader>    <div className="bg-bg-well rounded-r8 text-caption text-fg-muted p-4">      여름 바다, 주말 산책, 졸업식    </div>    <AlertDialogFooter>      <AlertDialogCancel>그대로 두기</AlertDialogCancel>      <AlertDialogAction color="danger">앨범 지우기</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

아래 3개가 사라져요.

여름 바다, 주말 산책, 졸업식

권장

설명에 사라지는 개수를 적어요.

고른 항목이 지워져요.

지양

사라지는 항목을 모르면 지울지 말지 정할 수 없어요.

모바일에서 위험한 동작을 넓게

좁은 화면에서는 grow-last로 위험한 동작을 넓혀 누르기 쉽게 하고, 넓은 화면에서는 오른쪽에 모아요. 창 폭을 줄여 보세요.

tsx

<AlertDialog>  <AlertDialogTrigger render={<Button color="neutral" emphasis="outline" />}>계정 탈퇴</AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogTitle>계정을 탈퇴할까요?</AlertDialogTitle>      <AlertDialogDescription>사진과 앨범이 모두 사라지고 되돌릴 수 없어요.</AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter layout={{ narrow: 'grow-last', wide: 'end' }}>      <AlertDialogCancel>그대로 두기</AlertDialogCancel>      <AlertDialogAction color="danger">탈퇴</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

버튼을 같은 폭으로

버튼이 2개이고 어느 쪽도 더 강조하지 않을 때 써요.

tsx

<AlertDialog>  <AlertDialogTrigger render={<Button color="neutral" emphasis="outline" />}>로그아웃</AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogTitle>로그아웃할까요?</AlertDialogTitle>      <AlertDialogDescription>다시 쓰려면 로그인해야 해요.</AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter layout="fill">      <AlertDialogCancel>그대로 두기</AlertDialogCancel>      <AlertDialogAction>로그아웃</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

왼쪽에 다른 선택지

답이 3개이고 그중 하나의 성격이 다를 때 써요. 그 버튼을 첫 번째에 둬요.

tsx

<AlertDialog>  <AlertDialogTrigger render={<Button color="neutral" emphasis="outline" />}>글 닫기</AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogTitle>저장하지 않고 닫을까요?</AlertDialogTitle>      <AlertDialogDescription>저장하지 않으면 쓴 내용이 사라져요.</AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter layout="between">      <AlertDialogAction render={<Button color="danger" emphasis="ghost" />}>버리기</AlertDialogAction>      <AlertDialogCancel>계속 쓰기</AlertDialogCancel>      <AlertDialogAction color="brand">저장하고 닫기</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

목록에서 하나만 지우기

설명에 지울 앨범의 이름을 적어요.

가족 여행
봄 소풍
첫 캠핑

tsx

<ul className="flex flex-col">  {albums.map(item => (    <li      key={item}      className="border-line flex items-center justify-between gap-2 border-b py-2 last:border-b-0"    >      <span className="text-prose">{item}</span>      <AlertDialog>        <AlertDialogTrigger render={<Button color="neutral" emphasis="ghost" shape="square" aria-label={`${item} 지우기`} />}>          <Trash2 />        </AlertDialogTrigger>        <AlertDialogContent>          <AlertDialogHeader>            <AlertDialogTitle>이 앨범을 지울까요?</AlertDialogTitle>            <AlertDialogDescription>              <strong className="text-fg">{item}</strong>만 지워져요. 나머지 앨범은 그대로 남아요.            </AlertDialogDescription>          </AlertDialogHeader>          <AlertDialogFooter>            <AlertDialogCancel>그대로 두기</AlertDialogCancel>            <AlertDialogAction color="danger" onClick={() => remove(item)}>앨범 지우기</AlertDialogAction>          </AlertDialogFooter>        </AlertDialogContent>      </AlertDialog>    </li>  ))}</ul>

컨트롤

size

layout

color

tsx

<AlertDialog>  <AlertDialogTrigger render={<Button color="neutral" emphasis="outline" />}>쓰던 글 버리기</AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogTitle>쓰던 글을 버릴까요?</AlertDialogTitle>      <AlertDialogDescription>        지금까지 쓴 내용이 사라져요.      </AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter>      <AlertDialogCancel>계속 쓰기</AlertDialogCancel>      <AlertDialogAction>글 버리기</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

명세

이름
이름	값	기본
AlertDialog
open	boolean	-
호출하는 쪽에서 열림 상태를 관리해요.
defaultOpen	boolean	false
처음에 열어 둘지 정해요.
onOpenChange	(open: boolean, eventDetails) => void	-
열리거나 닫히면 호출돼요.
render	ReactElement	-
기본 요소 대신 그릴 요소예요. AlertDialogTrigger에 Button을 넘길 때 써요.
className	string	-
모든 하위 컴포넌트에 쓸 수 있어요.
AlertDialogContent
size	sm, md, lg	sm
sm은 448px, md는 480px, lg는 640px까지 넓어져요. Dialog와 같은 값이고, 좁은 화면에서는 양옆에 16px 여백을 둬요.
AlertDialogHeader
lead	ReactNode	-
제목 앞에 보여요.
trail	ReactNode	-
헤더 오른쪽 끝에 보여요.
AlertDialogFooter
layout	end, between, fill, grow-last, { narrow, wide }	end
Dialog의 DialogFooter와 같아요. { narrow, wide }를 넘기면 640px(sm)보다 좁을 때 narrow, 넓을 때 wide를 써요.
AlertDialogAction
color	neutral, brand, danger	neutral
동작의 성격에 맞춰 골라요.
onClick	(event) => void	-
누르면 호출되고 AlertDialog가 닫혀요.