kit

Subtle 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 Shell, List, Record, Form, Reports, Calendar

Subtle action

View the bookings for the main hall on

Subtle actions in a Row's actions.

Tuesday · Main Hall

A Subtle action in an Action group beside a Secondary action.

Return to invoices

A reminder already went out today.

Source
<button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Show booking notes</span></button>
<a href="#role-subtle-action" data-kit-role="subtle-action"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg><span data-kit-region="label">View the bookings for the main hall on <time datetime="2025-04-24">Thursday, 24 April 2025</time></span></a>
<button type="button" data-kit-role="subtle-action"><svg data-kit-icon="arrows-down-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M117.66,170.34a8,8,0,0,1,0,11.32l-32,32a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32L72,188.69V48a8,8,0,0,1,16,0V188.69l18.34-18.35A8,8,0,0,1,117.66,170.34Zm96-96-32-32a8,8,0,0,0-11.32,0l-32,32a8,8,0,0,0,11.32,11.32L168,67.31V208a8,8,0,0,0,16,0V67.31l18.34,18.35a8,8,0,0,0,11.32-11.32Z"/></svg><span data-kit-region="label">Move</span></button>
<p class="specimen-case-line">Subtle actions in a Row's actions.</p>
<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-subtle-action">Oakmere WI</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Tuesday ·&nbsp;Main Hall</span></p></div>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><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"/></svg><span data-kit-region="label">Change the room</span></button><button type="button" data-kit-role="subtle-action"><svg data-kit-icon="arrows-down-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M117.66,170.34a8,8,0,0,1,0,11.32l-32,32a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32L72,188.69V48a8,8,0,0,1,16,0V188.69l18.34-18.35A8,8,0,0,1,117.66,170.34Zm96-96-32-32a8,8,0,0,0-11.32,0l-32,32a8,8,0,0,0,11.32,11.32L168,67.31V208a8,8,0,0,0,16,0V67.31l18.34,18.35a8,8,0,0,0,11.32-11.32Z"/></svg><span data-kit-region="label">Move</span></button></div>
  </div>
</article>
<p class="specimen-case-line">A Subtle action in an Action group beside a Secondary action.</p>
<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>
  <button type="button" data-kit-role="subtle-action"><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"/></svg><span data-kit-region="label">Copy the invoice link</span></button>
  <a href="#role-subtle-action" data-kit-role="way-back"><span data-kit-region="label">Return to invoices</span></a>
</div>
<div data-kit-role="action-group" data-kit-holds="words"><button type="button" id="subtle-reminder" data-kit-role="subtle-action" disabled aria-describedby="subtle-reminder-words"><span data-kit-region="label">Send reminder</span></button><p data-kit-region="words" id="subtle-reminder-words">A reminder already went out today.</p></div>

Subtle action, submitting

Source
<button type="button" data-kit-role="subtle-action" data-kit-state="submitting" disabled aria-busy="true"><span data-kit-region="label">Save the note</span></button>