kit

Primary 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, Stepped flow, Settings, Calendar, Issued document, Showcase

Primary action

An action can carry its label without an icon.

An action that opens another view is a link.

Edit billing contact

An action that cannot act yet is disabled, its reason beside it.

Add the hirer’s email before sending.

Source
<button type="button" data-kit-role="primary-action">
  <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>An action can carry its label without an icon.</p>
<button type="button" data-kit-role="primary-action"><span data-kit-region="label">Save contact</span></button>
<p>An action that opens another view is a link.</p>
<a href="#role-primary-action" data-kit-role="primary-action"><span data-kit-region="label">Edit billing contact</span></a>
<p>An action that cannot act yet is disabled, its reason beside it.</p>
<div data-kit-role="action-group" data-kit-holds="words"><button type="button" id="send-invoice" data-kit-role="primary-action" disabled aria-describedby="send-invoice-words"><span data-kit-region="label">Send invoice</span></button><p data-kit-region="words" id="send-invoice-words">Add the hirer’s email before sending.</p></div>

Primary action, submitting

Source
<button type="button" data-kit-role="primary-action" data-kit-state="submitting" disabled aria-busy="true">
  <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>