kit

Action group

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 Shell, Home, List, Record, Form, Stepped flow, Settings, Issued document

Action group

Return to bookings
Add your first room Return to setup
Return to the booking

Add the hirer’s email before sending.

Return to invoice

Send invoice is waiting, and More stands before the way back.

Add the hirer’s email before sending.

A sent invoice can’t be changed until it is filed.

Return to invoice

Draft saved.

Invoice actions with resending waiting on an email address.

Add the hirer’s email before sending.

Add the hirer’s email before resending.

Continue is waiting on a field and a choice in its form.

Rooms

Continue needs the hirer’s name and a room.

Invoice actions with a refused step held above them
Return to invoice

Not saved

Source
<div data-kit-role="action-group">
  <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Send invoice</span></button>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Save as draft</span></button>
  <a href="#role-action-group" data-kit-role="way-back"><span data-kit-region="label">Return to bookings</span></a>
</div>
<div data-kit-role="action-group">
  <a href="#role-action-group" data-kit-role="emphasised-next-action"><span data-kit-region="label">Add your first room</span></a>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Import rooms from a file</span></button>
  <a href="#role-action-group" data-kit-role="way-back"><span data-kit-region="label">Return to setup</span></a>
</div>
<div data-kit-role="action-group">
  <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Confirm the booking and send the invoice</span></button>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Hold the room without an invoice</span></button>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Ask Oakmere Primary School for the missing details</span></button>
  <a href="#role-action-group" data-kit-role="way-back"><span data-kit-region="label">Return to the booking</span></a>
</div>
<div data-kit-role="action-group">
  <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Send reminder</span></button>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Mark as paid</span></button>
  <a href="#role-action-group" data-kit-role="way-back"><span data-kit-region="label">Return to invoice</span></a>
  <div data-kit-region="routes"><a href="#role-action-group">View invoices</a><a href="#role-action-group">View payments received this month</a><a href="#role-action-group">View the client's bookings</a></div>
</div>
<div data-kit-role="action-group" data-kit-holds="words">
  <button type="button" id="action-group-send" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="action-group-send-words"><span data-kit-region="label">Send invoice</span></button><p data-kit-region="words" id="action-group-send-words">Add the hirer’s email before sending.</p>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Save as draft</span></button>
  <a href="#role-action-group" data-kit-role="way-back"><span data-kit-region="label">Return to invoice</span></a>
</div>
<p class="specimen-case-line" id="role-action-group-more">Send invoice is waiting, and More stands before the way back.</p>
<div data-kit-role="action-group" data-kit-holds="words">
  <button type="button" id="action-group-file" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="action-group-file-words"><span data-kit-region="label">Send invoice</span></button><p data-kit-region="words" id="action-group-file-words">Add the hirer’s email before sending.</p>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Save as draft</span></button>
<div id="action-group-more" data-kit-role="action-menu">
<button type="button" data-kit-role="icon-action" data-kit-state="inert" disabled id="action-group-more-trigger" aria-label="More actions for this invoice" aria-haspopup="menu" aria-controls="action-group-more-layer" aria-describedby="action-group-more-trigger-words"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="action-group-more-layer" popover="manual" role="menu" aria-labelledby="action-group-more-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="action-group-more-layer/0-0" role="menuitem"><svg data-kit-icon="pencil-simple" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"></path></svg><span data-kit-region="name">Edit</span><span data-kit-region="keys"><kbd>E</kbd></span></button></li><li role="none"><button type="button" data-kit-region="item" id="action-group-more-layer/0-1" role="menuitem"><svg data-kit-icon="copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path></svg><span data-kit-region="name">Duplicate</span><span data-kit-region="keys"><kbd>Ctrl</kbd><kbd>D</kbd></span></button></li></ul></li><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" data-kit-role="destructive-action" id="action-group-more-layer/1-0" role="menuitem"><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"></path></svg><span data-kit-region="name">Delete invoice</span></button></li></ul></li></ul></div><p data-kit-region="words" id="action-group-more-trigger-words">A sent invoice can’t be changed until it is filed.</p>
  <a href="#role-action-group" data-kit-role="way-back"><span data-kit-region="label">Return to invoice</span></a>
  <p data-kit-role="status-line" role="status" aria-live="polite">Draft saved.</p>
  <div data-kit-region="routes"><a href="#role-action-group">View invoices</a></div>
</div>
<p class="specimen-case-line" id="role-action-group-fold">Invoice actions with resending waiting on an email address.</p>
<div data-kit-role="action-group" data-kit-holds="words">
  <button type="button" id="action-group-fold-send" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="action-group-fold-send-words"><span data-kit-region="label">Send invoice</span></button><p data-kit-region="words" id="action-group-fold-send-words">Add the hirer’s email before sending.</p>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Save as draft</span></button>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Print invoice</span></button>
  <form action="#role-action-group"><button type="submit" id="action-group-fold-resend" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="action-group-fold-resend-words"><span data-kit-region="label">Resend invoice</span></button><p data-kit-region="words" id="action-group-fold-resend-words">Add the hirer’s email before resending.</p></form>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Download invoice</span></button>
  <div id="action-group-fold-more" data-kit-role="action-menu"><button type="button" data-kit-role="icon-action" id="action-group-fold-more-trigger" aria-label="More actions for this invoice" aria-haspopup="menu" aria-controls="action-group-fold-more-layer"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="action-group-fold-more-layer" popover="manual" role="menu" aria-labelledby="action-group-fold-more-trigger"></ul></div>
</div>
<p class="specimen-case-line" id="role-action-group-waiting">Continue is waiting on a field and a choice in its form.</p>
<form>
  <div data-kit-role="form-group" data-kit-width="medium" id="action-group-hirer">
    <label for="action-group-hirer-control">Hirer’s name</label>
    <input id="action-group-hirer-control" name="hirer" type="text">
  </div>
  <fieldset data-kit-role="selection-control" data-kit-region="group" id="action-group-rooms">
    <legend>Rooms</legend>
    <input type="hidden" name="rooms" value="">
    <label><input data-kit-role="selection-control" type="checkbox" name="rooms" value="main-hall"><span>Main hall</span><output>Not booked</output></label>
    <label><input data-kit-role="selection-control" type="checkbox" name="rooms" value="studio"><span>Studio</span><output>Not booked</output></label>
  </fieldset>
  <div data-kit-role="action-group" data-kit-holds="words">
    <button type="button" id="action-group-continue" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="action-group-continue-words" data-kit-waits-on='["hirer","rooms"]'><span data-kit-region="label">Continue</span></button>
    <p data-kit-region="words" id="action-group-continue-words">Continue needs the hirer’s name and a room.</p>
  </div>
</form>
<div data-kit-role="action-group">
<div data-kit-role="refusal" id="action-group-refusal" role="alert" aria-atomic="true">
  <p data-kit-region="line">Issue refund is refused until both transfers on this invoice have arrived.</p>
</div>
<button type="button" data-kit-role="primary-action"><span data-kit-region="label">Send invoice</span></button>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Save as draft</span></button>
<a href="#role-action-group" data-kit-role="way-back"><span data-kit-region="label">Return to invoice</span></a>
<p data-kit-role="status-line" data-kit-state="unsaved" role="status" aria-live="polite">Not saved</p>
</div>