アラートダイアログ

ユーザーを中断し、応答を期待するモーダル確認ダイアログ。

ソースコードを表示問題を報告 Playgroundで表示

<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リファレンス

このコンポーネントは、Alert Dialog primitiveから一部の要素とプロパティを継承しており、見た目はDialogと同じですが、セマンティクスと動作が異なります。

Root

ダイアログのすべての部分を含みます。

Trigger

ダイアログを開くコントロールをラップします。

Content

ダイアログのコンテンツを含みます。このコンポーネントは、div要素に基づいています。

プロパティ	型	デフォルト
`asChild`	`boolean`	デフォルト値なし
`align`	`"start" \| "center"`	`"center"`
`size`	`レスポンシブ<"1" \| "2" \| "3" \| "4">`	`"3"`
`width`	`レスポンシブ<string>`	デフォルト値なし
`minWidth`	`レスポンシブ<string>`	デフォルト値なし
`maxWidth`	`レスポンシブ<string>`	`"600px"`
`height`	`レスポンシブ<string>`	デフォルト値なし
`minHeight`	`レスポンシブ<string>`	デフォルト値なし
`maxHeight`	`レスポンシブ<string>`	デフォルト値なし

Title

ダイアログが開いたときにアナウンスされる、アクセシブルなタイトル。この部分は、事前に定義されたフォントサイズと上部のリーディングトリムを持つHeadingコンポーネントに基づいています。

Description

ダイアログが開いたときにアナウンスされる、オプションのアクセシブルな説明。この部分は、事前に定義されたフォントサイズを持つTextコンポーネントに基づいています。

説明を完全に削除したい場合は、この部分を削除し、Contentにaria-describedby={undefined}を渡してください。

Action

ダイアログを閉じるコントロールをラップします。これは、Cancelコントロールとは視覚的に区別される必要があります。

Cancel

ダイアログを閉じるコントロールをラップします。これは、Actionコントロールとは視覚的に区別される必要があります。

例

サイズ

ダイアログのサイズを制御するには、sizeプロパティを使用します。これは、Contentのpaddingとborder-radiusに影響します。ダイアログの幅を制御するには、width、minWidth、maxWidthプロパティと組み合わせて使用します。

<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>

インセットコンテンツ付き

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>danilo@example.com</Table.Cell>
            <Table.Cell>Developer</Table.Cell>
          </Table.Row>

          <Table.Row>
            <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
            <Table.Cell>zahra@example.com</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>

前へStrong

次へAspect Ratio

GitHubでこのページを編集する。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

アラートダイアログ