알림 대화상자

알림 대화상자 (Alert Dialog)

사용자를 방해하고 응답을 기대하는 모달 확인 대화상자예요. Alert Dialog 프리미티브의 부분과 props를 상속받아요.

출처: 문서

본문

사용자를 방해하고 응답을 기대하는 모달 확인 대화상자예요.

<AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button color="red">Revoke access</Button>
  </AlertDialog.Trigger>

  <AlertDialog.Content maxWidth="450px">
    <AlertDialog.Title>Revoke access</AlertDialog.Title>

    <AlertDialog.Description size="2">
      Are you sure? This application will no longer be accessible and any existing sessions will be
      expired.
    </AlertDialog.Description>

    <Flex gap="3" mt="4" justify="end">
      <AlertDialog.Cancel>
        <Button variant="soft" color="gray">
          Cancel
        </Button>
      </AlertDialog.Cancel>

      <AlertDialog.Action>
        <Button variant="solid" color="red">
          Revoke access
        </Button>
      </AlertDialog.Action>
    </Flex>
  </AlertDialog.Content>
</AlertDialog.Root>

API Reference

이 컴포넌트는 Alert Dialog 프리미티브의 부분과 props를 상속받으며, Dialog와 시각적으로 동일하되 의미와 동작은 다릅니다.

Root

대화상자의 모든 부분을 담고 있어요.

Trigger

대화상자를 열 컨트롤을 감싸요.

Content

대화상자의 콘텐츠를 담고 있어요. 이 컴포넌트는 div 요소를 기반으로 해요.

Prop	Type	Default
`asChild`	`boolean`	No default value
`align`	`"start" \| "center"`	`"center"`
`size`	`Responsive<"1" \| "2" \| "3" \| "4">`	`"3"`
`width`	`Responsive<string>`	No default value
`minWidth`	`Responsive<string>`	No default value
`maxWidth`	`Responsive<string>`	`"600px"`
`height`	`Responsive<string>`	No default value
`minHeight`	`Responsive<string>`	No default value
`maxHeight`	`Responsive<string>`	No default value

Title

대화상자가 열릴 때 알려 주는 접근 가능한 제목이에요. 이 부분은 미리 정의된 폰트 크기와 leading trim을 가진 Heading 컴포넌트를 기반으로 해요.

Description

대화상자가 열릴 때 알려 주는 선택적 접근 가능한 설명이에요. 이 부분은 미리 정의된 폰트 크기를 가진 Text 컴포넌트를 기반으로 해요.

설명을 완전히 제거하려면 이 부분을 제거하고 Content에 aria-describedby={undefined}를 전달해요.

Action

대화상자를 닫을 컨트롤을 감싸요. 시각적으로 Cancel 컨트롤과 구분되어야 해요.

Cancel

대화상자를 닫을 컨트롤을 감싸요. 시각적으로 Action 컨트롤과 구분되어야 해요.

예제 (Examples)

Size

size prop으로 대화상자의 크기를 제어해요. Content의 padding과 border-radius에 영향을 줘요. width, minWidth, maxWidth props와 함께 사용해 대화상자의 너비를 제어해요.

<Flex gap="4" align="center">
  <AlertDialog.Root>
    <AlertDialog.Trigger>
      <Button variant="soft">Size 1</Button>
    </AlertDialog.Trigger>

    <AlertDialog.Content size="1" maxWidth="300px">
      <Text as="p" trim="both" size="1">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </AlertDialog.Content>
  </AlertDialog.Root>

  <AlertDialog.Root>
    <AlertDialog.Trigger>
      <Button variant="soft">Size 2</Button>
    </AlertDialog.Trigger>

    <AlertDialog.Content size="2" maxWidth="400px">
      <Text as="p" trim="both" size="2">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </AlertDialog.Content>
  </AlertDialog.Root>

  <AlertDialog.Root>
    <AlertDialog.Trigger>
      <Button variant="soft">Size 3</Button>
    </AlertDialog.Trigger>

    <AlertDialog.Content size="3" maxWidth="500px">
      <Text as="p" trim="both" size="3">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </AlertDialog.Content>
  </AlertDialog.Root>

  <AlertDialog.Root>
    <AlertDialog.Trigger>
      <Button variant="soft">Size 4</Button>
    </AlertDialog.Trigger>

    <AlertDialog.Content size="4">
      <Text as="p" trim="both" size="4">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </AlertDialog.Content>
  </AlertDialog.Root>
</Flex>

With inset content

Inset 컴포넌트를 사용해 콘텐츠를 대화상자 가장자리에 딱 맞게 정렬해요.

<AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button color="red">Delete users</Button>
  </AlertDialog.Trigger>

  <AlertDialog.Content maxWidth="500px">
    <AlertDialog.Title>Delete Users</AlertDialog.Title>

    <AlertDialog.Description size="2">
      Are you sure you want to delete these users? This action is permanent and cannot be undone.
    </AlertDialog.Description>

    <Inset side="x" my="5">
      <Table.Root>
        <Table.Header>
          <Table.Row>
            <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>

            <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>

            <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          <Table.Row>
            <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

            <Table.Cell>[email protected]</Table.Cell>

            <Table.Cell>Developer</Table.Cell>
          </Table.Row>

          <Table.Row>
            <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

            <Table.Cell>[email protected]</Table.Cell>

            <Table.Cell>Admin</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table.Root>
    </Inset>

    <Flex gap="3" justify="end">
      <AlertDialog.Cancel>
        <Button variant="soft" color="gray">
          Cancel
        </Button>
      </AlertDialog.Cancel>

      <AlertDialog.Action>
        <Button color="red">Delete users</Button>
      </AlertDialog.Action>
    </Flex>
  </AlertDialog.Content>
</AlertDialog.Root>

더 알아보기 (Learn more)

Dialog 컴포넌트 — 일반 모달 대화상자
Alert Dialog 프리미티브 — 기본 동작 살펴보기