대화상자

대화상자 (Dialog)

페이지 위에 표시되는 모달 대화상자 창이에요. Dialog 프리미티브의 props를 상속받아요.

출처: 문서

본문

페이지 위에 표시되는 모달 대화상자 창이에요.

<Dialog.Root>
  <Dialog.Trigger>
    <Button>Edit profile</Button>
  </Dialog.Trigger>

  <Dialog.Content maxWidth="450px">
    <Dialog.Title>Edit profile</Dialog.Title>

    <Dialog.Description size="2" mb="4">
      Make changes to your profile.
    </Dialog.Description>

    <Flex direction="column" gap="3">
      <label>
        <Text as="div" size="2" mb="1" weight="bold">
          Name
        </Text>

        <TextField.Root defaultValue="Freja Johnsen" placeholder="Enter your full name" />
      </label>

      <label>
        <Text as="div" size="2" mb="1" weight="bold">
          Email
        </Text>

        <TextField.Root defaultValue="[email protected]" placeholder="Enter your email" />
      </label>
    </Flex>

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

      <Dialog.Close>
        <Button>Save</Button>
      </Dialog.Close>
    </Flex>
  </Dialog.Content>
</Dialog.Root>

API Reference

이 컴포넌트는 Dialog 프리미티브의 props를 상속받아요.

이 대화상자는 모달 패턴을 중심으로 설계되었으므로 modal prop은 사용할 수 없어요.

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}를 전달해요.

Close

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

예제 (Examples)

Size

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

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

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

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

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

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

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

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

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

With inset content

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

<Dialog.Root>
  <Dialog.Trigger>
    <Button>View users</Button>
  </Dialog.Trigger>

  <Dialog.Content>
    <Dialog.Title>Users</Dialog.Title>

    <Dialog.Description>The following users have access to this project.</Dialog.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">
      <Dialog.Close>
        <Button variant="soft" color="gray">
          Close
        </Button>
      </Dialog.Close>
    </Flex>
  </Dialog.Content>
</Dialog.Root>

더 알아보기 (Learn more)

AlertDialog 컴포넌트 — 확인용 모달 대화상자
Dialog 프리미티브 — 기본 동작 살펴보기