DangerZone

削除や公開の取り消しなど、影響の大きい操作を説明と一緒にまとめます。

記事を削除する

この記事と添付ファイルを削除します。削除した内容は元に戻せません。

記事を削除しますか?

「9月のお知らせ」と添付ファイル2件が対象です。この操作は取り消せません。

この作例では確認画面を閉じるだけで、データは削除しません。

設定画面に並べる:影響の小さい順に積む

公開を停止する

記事は下書きに戻り、共有済みのリンクからは読めなくなります。後で再公開できます。

所有者を変更する

所有者だけが記事の削除と公開範囲の変更をできます。変更後、あなたは編集者になります。

記事を削除する

この記事と添付ファイルを削除します。削除した内容は元に戻せません。

名前を入力して確認する

プロジェクトを削除する

プロジェクト内の記事・ファイル・コメントをすべて削除します。

プロジェクトを削除しますか?

確認のため、プロジェクト名「秋の特集」を入力してください。

操作できない場合

プロジェクトを削除する

プロジェクト内の記事・ファイル・コメントをすべて削除します。

削除できるのは管理者のみです。管理者に依頼してください。

処理中

記事を削除する

この記事と添付ファイルを削除しています。完了するまでお待ちください。

処理中の表示例です。この作例の状態は自動では変わりません。

失敗した場合

記事を削除する

この記事と添付ファイルを削除します。削除した内容は元に戻せません。

削除する内容を確認

「9月のお知らせ」と添付ファイル2件を削除します。この操作は取り消せません。

この作例では確認画面を閉じるだけで、データは削除しません。

長い説明・複数の操作・狭い領域

プロジェクトと関連するすべてのデータを削除する

このプロジェクトの記事、添付ファイル、コメントを削除します。参加しているメンバー全員が閲覧できなくなり、共有済みのリンクからもアクセスできなくなります。

必要な添付ファイルを保存してから進んでください。削除したデータは復元できません。

対象:autumn-editorial-project-2026-abcdefghijklmnopqrstuvwxyz0123456789

添付ファイルを確認する

プロジェクトを削除しますか?

プロジェクト「秋の特集」の記事12件、添付ファイル8件、コメント32件を削除します。

この作例では確認画面を閉じるだけで、データは削除しません。

この作例では隣に本文を置き、コンポーネントの幅が狭くなった場合の折り返しを確認できます。

右から左に読む場合

حذف المشروع

سيتم حذف المشروع والملفات المرتبطة به. لا يمكن التراجع عن هذا الإجراء.

يمكن للمسؤول فقط حذف المشروع.

使いどころ

  • 設定画面の末尾などに、削除・公開の停止・所有者の変更のような影響の大きい操作を、通常の保存と分けて置く時に使います。
  • 押した後の確認は Dialog を actions に渡して挟みます。取り消せない操作では、確認に対象の名前や件数を書きます。
  • 影響のある操作が並ぶ時は、一つの操作に一つの DangerZone を使い、影響の小さい順に並べます。
  • 操作を伴わない注意の文は Notice を使います。

使い方

title で操作名、description で影響、actions で Button・ActionLink・Dialog を渡します。children には追加の説明やフォームを入れ、説明と操作の間に置きます。

Basecamp 2のアカウントから抜ける時の確認の箱と同じく、淡い黄色(#ffffe0)の面に1px #ebdabe の枠と角丸3pxを付け、内側を16px空けて、通常の設定と見分けます。題名は本文の大きさ(13px)の黒い太字、説明は12pxの灰色にし、危険の色で塗った Button を添えます。children が無く幅がある時は題名と説明の末尾側に操作を置き、狭い時や children がある時は下の段へ回します。操作は幅が足りなければ折り返します。children や actions が無い時は、その段を詰めます。

DangerZone 自体にcontrollerの登録は要りません。確認に Dialog を使う時は DialogController を登録します。

削除などの処理・権限の判定・状態の更新は利用側が行います。処理中は操作に busy を渡し、失敗した時は Notice を children に入れて伝えます。

アクセシビリティ

  • 題名は h2 です。置く場所の見出しの階層に合わせて、画面の構成を確かめます。
  • 権限などで押せない時は、理由の文を children に置き、操作の aria-describedby で結び付けます。
  • 強制カラーモードでは面の色を外し、全体を文字の色の枠で囲みます。

API

DangerZone

影響の説明と操作をまとめる。確認や実行には利用側のButton・Dialogを渡す。

DangerZoneのprops
名前型既定値説明
titlestring"影響のある操作"操作の名前。h2で置く。
descriptionstring操作の影響。何が消え、元に戻せるかを書く。
actionsChild説明の下に並べる操作。ButtonやActionLink、確認を挟む時はDialogを渡す。幅が足りなければ折り返す。
childrenChild説明と操作の間に置く、追加の説明やフォーム。

ほかに、<section>へ標準のHTML属性を渡せます。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/danger-zone.css

コード

HTML
Hono JSX