kit

Icon 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, Home, List, Record, Form, Settings, Find, Reports, Calendar, Showcase

Icon action

Icon actions in a Row's actions, named with the row's subject.

An Icon action in an Action group beside a Secondary action.

Return to invoices

Icon actions in the page header's actions.

Skip to content
Hallkeeper

Oakmere WI

Booking

Room
Main Hall
Day
Tuesday
Source
<button type="button" data-kit-role="icon-action" aria-label="More actions"><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"/></svg></button>
<button type="button" data-kit-role="icon-action" aria-label="Copy the invoice link"><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></button>
<a href="#role-icon-action" data-kit-role="icon-action" aria-label="Edit the booking"><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></a>
<p class="specimen-case-line">Icon actions in a Row's actions, named with the row's subject.</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-icon-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="icon-action" aria-label="Edit Oakmere WI"><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></button><button type="button" data-kit-role="icon-action" aria-label="More actions for Oakmere WI"><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"/></svg></button></div>
  </div>
</article>
<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-icon-action">Oakmere Primary School</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Thursday ·&nbsp;Garden Room</span></p></div>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="icon-action" aria-label="Edit Oakmere Primary School"><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></button><button type="button" data-kit-role="icon-action" aria-label="More actions for Oakmere Primary School"><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"/></svg></button></div>
  </div>
</article>
<p class="specimen-case-line">An Icon 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="icon-action" aria-label="Copy the invoice link"><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></button>
  <a href="#role-icon-action" data-kit-role="way-back"><span data-kit-region="label">Return to invoices</span></a>
</div>
<p class="specimen-case-line">Icon actions in the page header's actions.</p>
<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">H</span><span data-kit-wordmark>Hallkeeper</span></div></div>
  <header data-kit-region="header">
    <div>
      <h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Oakmere WI</h1>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Edit booking</span></button><button type="button" data-kit-role="icon-action" aria-label="Pin Oakmere WI"><svg data-kit-icon="push-pin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M235.32,81.37,174.63,20.69a16,16,0,0,0-22.63,0L98.37,74.49c-10.66-3.34-35-7.37-60.4,13.14a16,16,0,0,0-1.29,23.78L85,159.71,42.34,202.34a8,8,0,0,0,11.32,11.32L96.29,171l48.29,48.29A16,16,0,0,0,155.9,224c.38,0,.75,0,1.13,0a15.93,15.93,0,0,0,11.64-6.33c19.64-26.1,17.75-47.32,13.19-60L235.33,104A16,16,0,0,0,235.32,81.37ZM224,92.69h0l-57.27,57.46a8,8,0,0,0-1.49,9.22c9.46,18.93-1.8,38.59-9.34,48.62L48,100.08c12.08-9.74,23.64-12.31,32.48-12.31A40.13,40.13,0,0,1,96.81,91a8,8,0,0,0,9.25-1.51L163.32,32,224,92.68Z"/></svg></button><a href="#role-icon-action" data-kit-role="icon-action" aria-label="Previous booking"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a><a href="#role-icon-action" data-kit-role="icon-action" aria-label="Next booking"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="record" data-kit-density="desk">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="facts-related-records">
        <h2>Booking</h2>
        <div data-kit-role="fact-group">
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main Hall</dd></dl>
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Day</dt><dd data-kit-region="value">Tuesday</dd></dl>
        </div>
      </section>
    </div>
  </main>
</div>