吹き出し

ユーザーの注意を引く短いメッセージ。

ソースコードを見る問題を報告する Playgroundで確認

このアプリケーションをインストールしてアクセスするには、管理者権限が必要です。

<Callout.Root>
  <Callout.Icon>
    <InfoCircledIcon />
  </Callout.Icon>
  <Callout.Text>
    You will need admin privileges to install and access this application.
  </Callout.Text>
</Callout.Root>

APIリファレンス

ルート

グループアイコンとテキスト部分。このコンポーネントはdiv要素に基づいており、共通のマージンプロパティをサポートしています。

プロパティ	型	デフォルト値
`asChild`	`ブール値`	デフォルト値なし
`size`	`レスポンシブ<"1" \| "2" \| "3">`	`"2"`
`variant`	`"soft" \| "surface" \| "outline"`	`"soft"`
`color`	`列挙型`	デフォルト値なし
`highContrast`	`ブール値`	デフォルト値なし

アイコン

コールアウトに関連付けられたアイコンの幅と高さを指定します。このコンポーネントはdiv要素に基づいています。

テキスト

コールアウトテキストをレンダリングします。このコンポーネントはp要素に基づいています。

例

サイズ

sizeプロパティを使用してサイズを制御します。

このアプリケーションをインストールしてアクセスするには、管理者権限が必要です。

<Flex direction="column" gap="3" align="start">
  <Callout.Root size="1">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need admin privileges to install and access this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root size="2">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need admin privileges to install and access this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root size="3">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need admin privileges to install and access this application.
    </Callout.Text>
  </Callout.Root>
</Flex>

バリアント

variantプロパティを使用して視覚スタイルを制御します。

このアプリケーションをインストールしてアクセスするには、管理者権限が必要です。

<Flex direction="column" gap="3">
  <Callout.Root variant="soft">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access
      this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root variant="surface">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access
      this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root variant="outline">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access
      this application.
    </Callout.Text>
  </Callout.Root>
</Flex>

色

colorプロパティを使用して、特定の色を割り当てます。

このアプリケーションをインストールしてアクセスするには、管理者権限が必要です。

<Flex direction="column" gap="3">
  <Callout.Root color="blue">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access
      this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root color="green">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access
      this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root color="red">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access
      this application.
    </Callout.Text>
  </Callout.Root>
</Flex>

高コントラスト

HighContrastプロパティを使用して、コントラストを向上させます。

Radix Themesのアップデートが利用可能です。バージョン3.2.0の新機能をご覧ください。

<Flex direction="column" gap="3">
  <Callout.Root color="gray" variant="soft">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      An update to Radix Themes is available. See what’s new in version 3.2.0.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root color="gray" variant="soft" highContrast>
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      An update to Radix Themes is available. See what’s new in version 3.2.0.
    </Callout.Text>
  </Callout.Root>
</Flex>

アラートとして

ユーザーの即時的な注意が必要な場合（エラーメッセージが表示された場合など）、ネイティブのWAI-ARIA alertロールをコールアウトに追加してください。スクリーンリーダーは中断され、新しいコンテンツがすぐに読み上げられます。

アクセスが拒否されました。このページを表示するには、ネットワーク管理者にお問い合わせください。

<Callout.Root color="red" role="alert">
  <Callout.Icon>
    <ExclamationTriangleIcon />
  </Callout.Icon>
  <Callout.Text>
    Access denied. Please contact the network administrator to view this page.
  </Callout.Text>
</Callout.Root>

前へボタン

次へカード

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

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

吹き出し