ChoisSTANDARD UI컴포넌트 검색 /

Feedback

Confirm

semantic HTML

위험하거나 되돌리기 어려운 작업을 확인합니다.

stablefreeSince 0.2

Live example

Archive project?

You can restore it later.

No decision
<button type="button" data-example-action="open-confirm">Archive project</button><dialog data-standard-component="confirm" id="standard-confirm"><article><header><strong>Archive project?</strong></header><p>You can restore it later.</p><footer><form method="dialog"><button value="no" class="secondary" data-confirm="no">Cancel</button><button value="yes" data-confirm="yes">Archive</button></form></footer></article></dialog><output data-example-output aria-live="polite">No decision</output>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

ContractValue
Implementationsemantic HTML
Statusstable
Licensefree
Since0.2
HTML contractNative HTML elements and attributes
EventsNative browser events

Accessibility

모든 닫기 경로에서 Promise를 종료하고 yes/no 결과 뒤 원래 포커스로 복귀합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->