On Calendar
Split action
A draft invoice's actions
Source
<details>
<summary>A draft invoice's actions</summary>
<div data-kit-role="action-group">
<div id="role-split-action-send" data-kit-role="split-action"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Send invoice</span></button><button aria-controls="role-split-action-send-layer" aria-haspopup="menu" aria-label="More ways to send" data-kit-role="icon-action" id="role-split-action-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-split-action-send-layer" popover="manual" role="menu" aria-labelledby="role-split-action-send-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="role-split-action-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-split-action-send-layer/0-1" role="menuitem"><span data-kit-region="name">Schedule sending…</span></button></li></ul></li></ul></div>
<div id="role-split-action-save" data-kit-role="split-action"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Save as draft</span></button><button aria-controls="role-split-action-save-layer" aria-haspopup="menu" aria-label="More ways to save" data-kit-role="icon-action" id="role-split-action-save-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-split-action-save-layer" popover="manual" role="menu" aria-labelledby="role-split-action-save-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="role-split-action-save-layer/0-0" role="menuitem"><span data-kit-region="name">Save as a template</span></button></li><li role="none"><button type="button" data-kit-region="item" id="role-split-action-save-layer/0-1" role="menuitem"><span data-kit-region="name">Save a copy as a new draft</span></button></li></ul></li></ul></div>
</div>
</details>
Split action, submitting
An invoice being sent
Source
<details>
<summary>An invoice being sent</summary>
<div data-kit-role="action-group">
<div id="role-split-action-sending" data-kit-role="split-action"><button type="button" data-kit-role="primary-action" data-kit-state="submitting" disabled aria-busy="true"><span data-kit-region="label">Send invoice</span></button><button aria-controls="role-split-action-sending-layer" aria-haspopup="menu" aria-label="More ways to send" data-kit-role="icon-action" disabled id="role-split-action-sending-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-split-action-sending-layer" popover="manual" role="menu" aria-labelledby="role-split-action-sending-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="role-split-action-sending-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-split-action-sending-layer/0-1" role="menuitem"><span data-kit-region="name">Schedule sending…</span></button></li></ul></li></ul></div>
</div>
</details>