kit

Destructive action

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On Stepped flow

Destructive action

A Destructive action confirming an Inline consequence.

Oakmere WI booking

Deleting this booking frees Tuesday in the Main Hall and removes its invoice.

Takes effect as soon as you confirm.

A Destructive action last in an Action group.

Return to bookings

A Destructive action that waits.

You can delete the hall once its last booking is over.

A Destructive action leading a Dialog.

Delete the booking

Delete the booking

Oakmere WI booking

Deleting this booking frees Tuesday in the Main Hall and removes its invoice.

Takes effect as soon as you confirm.

A Dialog that asks for the name of work others share before deleting it.

Delete the workspace

Delete the workspace

Northwind

Deleting Northwind removes its projects and files for everyone in it, and cannot be undone.

Takes effect as soon as you confirm.

No name typed

Type Northwind to delete it.

A Destructive action committing a Stepped flow.

  1. CompleteChoose
  2. Confirm

Delete a hirer

Riverside Scouts

Deleting Riverside Scouts removes their bookings and invoices, and cannot be undone.

Takes effect as soon as you confirm.

Back to hirers

Source
<button type="button" data-kit-role="destructive-action"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg><span data-kit-region="label">Delete the booking</span></button>
<p class="specimen-case-line">A Destructive action confirming an Inline consequence.</p>
<section data-kit-role="inline-consequence" aria-label="Delete the Oakmere WI booking">
  <h3 data-kit-region="subject">Oakmere WI booking</h3>
  <p data-kit-region="consequence">Deleting this booking frees Tuesday in the Main Hall and removes its invoice.</p>
  <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
  <p data-kit-region="correction-path"></p>
  <button type="button" data-kit-role="destructive-action"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg><span data-kit-region="label">Delete the booking</span></button>
</section>
<p class="specimen-case-line">A Destructive action last in an Action group.</p>
<div data-kit-role="action-group">
  <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Save the booking</span></button>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Duplicate</span></button>
  <button type="button" data-kit-role="destructive-action"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg><span data-kit-region="label">Delete the booking</span></button>
  <a href="#role-destructive-action" data-kit-role="way-back"><span data-kit-region="label">Return to bookings</span></a>
</div>
<p class="specimen-case-line">A Destructive action that waits.</p>
<div data-kit-role="action-group" data-kit-holds="words"><button type="button" id="delete-hall" data-kit-role="destructive-action" data-kit-state="inert" disabled aria-describedby="delete-hall-words"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg><span data-kit-region="label">Delete the hall</span></button><p data-kit-region="words" id="delete-hall-words">You can delete the hall once its last booking is over.</p></div>
<p class="specimen-case-line">A Destructive action leading a Dialog.</p>
<details>
  <summary>Delete the booking</summary>
  <button type="button" id="destructive-booking-dialog-opener" data-kit-role="secondary-action" commandfor="destructive-booking-dialog" command="show-modal"><span data-kit-region="label">Delete the booking</span></button>
  <dialog id="destructive-booking-dialog" data-kit-role="dialog" data-kit-state="open" aria-labelledby="destructive-booking-dialog-title">
    <h2 data-kit-region="heading" id="destructive-booking-dialog-title">Delete the booking</h2>
    <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Delete the Oakmere WI booking">
      <h3 data-kit-region="subject">Oakmere WI booking</h3>
      <p data-kit-region="consequence">Deleting this booking frees Tuesday in the Main Hall and removes its invoice.</p>
      <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
      <p data-kit-region="correction-path"></p>
    </section>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="button" data-kit-role="destructive-action"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg><span data-kit-region="label">Delete the booking</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="destructive-booking-dialog" command="close"><span data-kit-region="label">Keep the booking</span></button>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A Dialog that asks for the name of work others share before deleting it.</p>
<details>
  <summary>Delete the workspace</summary>
  <button type="button" id="destructive-workspace-dialog-opener" data-kit-role="secondary-action" commandfor="destructive-workspace-dialog" command="show-modal"><span data-kit-region="label">Delete the workspace</span></button>
  <dialog id="destructive-workspace-dialog" data-kit-role="dialog" data-kit-state="open" aria-labelledby="destructive-workspace-dialog-title">
    <h2 data-kit-region="heading" id="destructive-workspace-dialog-title">Delete the workspace</h2>
    <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Delete the Northwind workspace">
      <h3 data-kit-region="subject">Northwind</h3>
      <p data-kit-region="consequence">Deleting Northwind removes its projects and files for everyone in it, and cannot be undone.</p>
      <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
      <p data-kit-region="correction-path"></p>
    </section>
    <div data-kit-region="form-groups">
      <div data-kit-role="form-group" data-kit-width="medium">
        <label for="destructive-workspace-name">Workspace name</label>
        <input id="destructive-workspace-name" name="name" type="text" />
        <output for="destructive-workspace-name">No name typed</output>
      </div>
    </div>
    <div data-kit-role="action-group"><div data-kit-region="actions">
      <button type="button" id="destructive-workspace-delete" data-kit-role="destructive-action" data-kit-state="inert" disabled aria-describedby="destructive-workspace-delete-words" data-kit-confirm-name="Northwind"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg><span data-kit-region="label">Delete the workspace</span></button>
      <button type="button" data-kit-role="secondary-action" commandfor="destructive-workspace-dialog" command="close"><span data-kit-region="label">Keep the workspace</span></button><p data-kit-region="words" id="destructive-workspace-delete-words">Type Northwind to delete it.</p>
    </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
  </div></dialog>
</details>
<p class="specimen-case-line">A Destructive action committing a Stepped flow.</p>
<div data-kit-layout="stepped-flow">
  <div data-kit-region="notices" aria-live="polite"></div>
  <ol data-kit-role="progress" data-kit-region="progress" aria-label="Deletion progress">
    <li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Choose</span></li>
    <li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Confirm</span></li>
  </ol>
  <form data-kit-region="current-step" id="destructive-step" aria-labelledby="destructive-step-title">
    <h2 id="destructive-step-title">Delete a hirer</h2>
    <div data-kit-region="notices" aria-live="polite"></div>
    <section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Delete Riverside Scouts">
      <h3 data-kit-region="subject">Riverside Scouts</h3>
      <p data-kit-region="consequence">Deleting Riverside Scouts removes their bookings and invoices, and cannot be undone.</p>
      <p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
      <p data-kit-region="correction-path"></p>
    </section>
  </form>
  <div data-kit-role="action-group" data-kit-region="back-continue-or-commit"><a href="#destructive-step-title" data-kit-role="way-back"><span data-kit-region="label">Back to hirers</span></a><button type="submit" form="destructive-step" data-kit-role="destructive-action"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg><span data-kit-region="label">Delete the hirer</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>

Destructive action, submitting

Source
<button type="button" data-kit-role="destructive-action" data-kit-state="submitting" disabled aria-busy="true"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg><span data-kit-region="label">Delete the booking</span></button>