Destructive Confirmation Flow

A destructive confirmation flow composed from alerts, modal dialogs and primary and secondary actions.

Confirm an irreversible action

Show the consequence before opening the dialog, repeat the affected resource in the confirmation and reserve the strongest action style for the final destructive step.

Atlas API

Production project · eu-central

Danger zone

Deletion is permanent

Three environments, 18 deployments and all project audit history will be removed.

Environments3 active

Team access12 members

RecoveryNot available

<section class="card shadow-sm border-error" aria-labelledby="project-title">
<header class="card-header">
	<h3 class="card-title" id="project-title">Atlas API</h3>
	<span class="badge bg-error">Danger zone</span>
</header>

<div class="card-body">
	<div class="alert bg-warning" role="note" aria-label="Deletion warning">
		<i class="icon icon-md alert-icon" aria-hidden="true"><!-- warning icon --></i>
		<div class="alert-content">
			<p class="alert-title">Deletion is permanent</p>
			<p class="alert-message">Environments, deployments and audit history will be removed.</p>
		</div>
	</div>

	<button
		class="btn btn-outline btn-error"
		type="button"
		aria-haspopup="dialog"
		aria-controls="delete-project-modal"
		data-modal-target="#delete-project-modal">
		Delete project
	</button>
</div>
</section>

<dialog
class="modal modal-sm"
id="delete-project-modal"
aria-labelledby="delete-project-title"
aria-describedby="delete-project-description delete-project-warning">
<form class="modal-content" action="/projects/atlas-api/delete" method="post">
	<header class="modal-header">
		<h3 class="modal-title" id="delete-project-title">Delete Atlas API?</h3>
		<button class="modal-close icon-btn icon-btn-text" type="button" data-modal-close aria-label="Close confirmation">
			×
		</button>
	</header>

	<div class="modal-body">
		<p id="delete-project-description">This immediately removes the production project.</p>
		<div class="alert bg-error" role="note" aria-label="Final deletion warning">
			<div class="alert-content">
				<p class="alert-title">This cannot be undone</p>
				<p class="alert-message" id="delete-project-warning">Backups and audit records will not be recoverable.</p>
			</div>
		</div>
	</div>

	<footer class="modal-footer">
		<button class="btn btn-text btn-secondary" type="button" data-modal-close>
			Keep project
		</button>
		<button class="btn btn-solid btn-error" type="submit" data-modal-close>
			Delete Atlas API
		</button>
	</footer>
</form>
</dialog>