kit

Inert control

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.

Inert control, inert

An inert action's own words, one line after its Action group.

Complete the billing email before saving.

Wait for the current draft to load.

Add a line item before review.

Add the customer's email before sending.

Two actions inert for one reason share one line.

Add a receipt for the taxi fare before submitting.

Duplicate claim and Export as PDF wait until the receipts finish uploading.

A region's standing describes the actions it makes inert; an action outside it keeps its own words.

Hall booking

The hall calendar is syncing

The date and room can't be changed while the hall calendar syncs.

Organiser
Aisha Khan
Room
Garden Room

The invoice is ready once the booking is paid.

A page's standing describes every action it makes inert, wherever it stands.

This invoice is paid

A paid invoice can't be edited, sent again or have its reminder withdrawn.

Oakmere Primary School invoice

Amount
£84.00
Source
<p class="specimen-case-line">An inert action's own words, one line after its Action group.</p>
<div data-kit-role="action-group" data-kit-holds="words">
<button type="button" id="save-changes" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="save-changes-words">
  <svg data-kit-icon="arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/></svg><span data-kit-region="label">
  Save changes
</span></button><p data-kit-region="words" id="save-changes-words">Complete the billing email before saving.</p>
<button type="button" id="save-draft" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="save-draft-words"><span data-kit-region="label">Save draft</span></button><p data-kit-region="words" id="save-draft-words">Wait for the current draft to load.</p>
</div>
<div data-kit-role="action-group" data-kit-holds="words">
<button type="button" id="review-invoice" data-kit-role="emphasised-next-action" data-kit-state="inert" disabled aria-describedby="review-invoice-words"><span data-kit-region="label">Review invoice</span></button>
<p data-kit-region="words" id="review-invoice-words">Add a line item before review.</p>
</div>
<div data-kit-role="action-group" data-kit-holds="words">
<div id="role-inert-control-send" data-kit-role="split-action"><button aria-describedby="send-invoice-words" data-kit-role="primary-action" data-kit-state="inert" disabled id="send-invoice" type="button"><span data-kit-region="label">Send invoice</span></button><button aria-controls="role-inert-control-send-layer" aria-describedby="send-invoice-words" aria-haspopup="menu" aria-label="More ways to send" data-kit-role="icon-action" data-kit-state="inert" disabled id="role-inert-control-send-trigger" type="button">
  <svg data-kit-icon="caret-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg>
</button><ul data-kit-role="popover" id="role-inert-control-send-layer" popover="manual" role="menu" aria-labelledby="role-inert-control-send-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="role-inert-control-send-layer/0-0" role="menuitem"><span data-kit-region="name">Send and mark as paid</span></button></li><li role="none"><button type="button" data-kit-region="item" id="role-inert-control-send-layer/0-1" role="menuitem"><span data-kit-region="name">Schedule sending…</span></button></li></ul></li></ul></div><p data-kit-region="words" id="send-invoice-words">Add the customer's email before sending.</p>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Save as draft</span></button>
</div>
<p class="specimen-case-line">Two actions inert for one reason share one line.</p>
<div data-kit-role="action-group" data-kit-holds="words">
<button type="button" id="submit-claim" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="submit-claim-words"><span data-kit-region="label">Submit claim</span></button><p data-kit-region="words" id="submit-claim-words">Add a receipt for the taxi fare before submitting.</p>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="receipts-uploading"><span data-kit-region="label">Duplicate claim</span></button>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="receipts-uploading"><span data-kit-region="label">Export as PDF</span></button>
<p data-kit-region="words" id="receipts-uploading">Duplicate claim and Export as PDF wait until the receipts finish uploading.</p>
</div>
<p class="specimen-case-line">A region's standing describes the actions it makes inert; an action outside it keeps its own words.</p>
<div data-kit-role="headed-region">
  <h3 data-kit-region="heading">Hall booking</h3>
  <div data-kit-region="content">
    <div data-kit-region="notices" aria-live="polite">
      <div data-kit-role="notice" data-kit-state="settled">
        <svg data-kit-icon="info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg>
        <p data-kit-region="standing">The hall calendar is syncing</p>
        <p data-kit-region="sentence" id="booking-syncing">The date and room can't be changed while the hall calendar syncs.</p>
      </div>
    </div>
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Organiser</dt><dd data-kit-region="value">Aisha Khan</dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Garden Room</dd></dl>
    </div>
    <div data-kit-role="action-group">
    <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="booking-syncing"><span data-kit-region="label">Change date</span></button>
    <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="booking-syncing"><span data-kit-region="label">Change room</span></button>
    </div>
  </div>
</div>
<div data-kit-role="action-group" data-kit-holds="words">
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Email the organiser</span></button>
<button type="button" id="download-booking-invoice" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="download-booking-invoice-words"><span data-kit-region="label">Download invoice</span></button><p data-kit-region="words" id="download-booking-invoice-words">The invoice is ready once the booking is paid.</p>
</div>
<p class="specimen-case-line">A page's standing describes every action it makes inert, wherever it stands.</p>
<div data-kit-role="notice" data-kit-state="settled">
  <svg data-kit-icon="info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg>
  <p data-kit-region="standing">This invoice is paid</p>
  <p data-kit-region="sentence" id="invoice-paid">A paid invoice can't be edited, sent again or have its reminder withdrawn.</p>
</div>
<div data-kit-role="headed-region">
  <h3 data-kit-region="heading">Oakmere Primary School invoice</h3>
  <div data-kit-region="content">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Amount</dt><dd data-kit-region="value" data-kit-role="amount">£84.00</dd></dl>
    </div>
    <div data-kit-role="action-group">
    <button type="button" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="invoice-paid"><span data-kit-region="label">Edit invoice</span></button>
    <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="invoice-paid"><span data-kit-region="label">Send again</span></button>
    </div>
  </div>
</div>
<article data-kit-role="row">
  <div data-kit-region="content-column">
    <div data-kit-region="subject-column">
      <div data-kit-region="line">
        <div data-kit-region="subject-stamp">
          <a data-kit-region="subject" href="#role-inert-control-inert">Payment reminder</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Sends on <time datetime="2026-05-20">20 May 2026</time></span></p></div>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="invoice-paid"><span data-kit-region="label">Withdraw</span></button></div>
  </div>
</article>