アドモニション
作成2026年3月22日Takeshi Takatsudo
5つの種類で重要な情報を強調するためのコールアウトブロック。
アドモニションは重要な情報を強調するためのコールアウトブロックです。5種類すべてがグローバルに利用可能で、インポートは不要です。
Note
📝 Note
これはNoteです。一般的な情報やヒントの表示に使用します。
📝 カスタムタイトル
Noteは読者が見逃すべきでない重要な情報を強調するのに適しています。
:::note
これはNoteです。一般的な情報やヒントの表示に使用します。
:::
:::note[カスタムタイトル]
Noteは読者が見逃すべきでない重要な情報を強調するのに適しています。
:::
Tip
💡 Tip
これはTipです。便利な提案やベストプラクティスの紹介に使用します。
💡 便利なヒント
キーボードショートカットを使うと作業を効率化できます。
:::tip
これはTipです。便利な提案やベストプラクティスの紹介に使用します。
:::
:::tip[便利なヒント]
キーボードショートカットを使うと作業を効率化できます。
:::
Info
ℹ️ Info
これはInfoブロックです。追加のコンテキストや背景情報の提供に使用します。
ℹ️ 豆知識
この機能はバージョン2.0で導入されました。
:::info
これはInfoブロックです。追加のコンテキストや背景情報の提供に使用します。
:::
:::info[豆知識]
この機能はバージョン2.0で導入されました。
:::
Warning
⚠️ Warning
これはWarningです。潜在的な問題や注意すべき点のフラグに使用します。
⚠️ 非推奨のお知らせ
このAPIは次のメジャーバージョンで削除されます。新しいAPIへの移行をお願いします。
:::warning
これはWarningです。潜在的な問題や注意すべき点のフラグに使用します。
:::
:::warning[非推奨のお知らせ]
このAPIは次のメジャーバージョンで削除されます。新しいAPIへの移行をお願いします。
:::
Danger
🚨 Danger
これはDangerアラートです。データ損失や破壊的変更に関する重大な警告に使用します。
🚨 破壊的変更
このコマンドを実行すると、すべてのデータが完全に削除されます。この操作は取り消せません。
:::danger
これはDangerアラートです。データ損失や破壊的変更に関する重大な警告に使用します。
:::
:::danger[破壊的変更]
このコマンドを実行すると、すべてのデータが完全に削除されます。この操作は取り消せません。
:::
コンポーネント構文
上記のディレクティブ構文に加えて、JSXコンポーネント構文も使用できます。より細かい制御が必要な場合やカスタムレイアウトを構築する場合に便利です。
<Note>
デフォルトタイトルのNote。
</Note>
<Warning title="注意">
カスタムタイトル付きのWarning。
</Warning>
コンポーネント構文は同じ5種類(Note、Tip、Info、Warning、Danger)とオプションの title プロップをサポートしています。
プロップ
| プロップ | 型 | デフォルト | 説明 |
|---|---|---|---|
title | string | タイプ名(例:“Note”) | デフォルトのタイトルテキストを上書き |
カラーリファレンス
各アドモニションタイプは、ボーダーとタイトルの色にセマンティックカラートークンを使用しています:
| タイプ | カラートークン | 代表的な色 |
|---|---|---|
| Note | accent | 青 |
| Tip | success | 緑 |
| Info | info | シアン |
| Warning | warning | 黄 |
| Danger | danger | 赤 |