Inert control, inert
An inert action's own words, one line after its Action group.
Complete the billing email before saving.
Wait for the current draft to load.
Add a line item before review.
Add the customer's email before sending.
Two actions inert for one reason share one line.
Add a receipt for the taxi fare before submitting.
Duplicate claim and Export as PDF wait until the receipts finish uploading.
A region's standing describes the actions it makes inert; an action outside it keeps its own words.
Hall booking
The hall calendar is syncing
The date and room can't be changed while the hall calendar syncs.
- Organiser
- Aisha Khan
- Room
- Garden Room
The invoice is ready once the booking is paid.
A page's standing describes every action it makes inert, wherever it stands.
This invoice is paid
A paid invoice can't be edited, sent again or have its reminder withdrawn.
Oakmere Primary School invoice
- Amount
- £84.00
Sends on
Source
<p class="specimen-case-line">An inert action's own words, one line after its Action group.</p>
<Kit.Phoenix.Roles.ActionGroup.action_group>
<:lead action="primary-action" action_state={Kit.Phoenix.ActionState.inert("save-changes", "Complete the billing email before saving.")} icon="arrow-right">Save changes</:lead>
<:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("save-draft", "Wait for the current draft to load.")}>Save draft</:secondary>
</Kit.Phoenix.Roles.ActionGroup.action_group>
<Kit.Phoenix.Roles.ActionGroup.action_group>
<:lead action="emphasised-next-action" action_state={Kit.Phoenix.ActionState.inert("review-invoice", "Add a line item before review.")}>Review invoice</:lead>
</Kit.Phoenix.Roles.ActionGroup.action_group>
<Kit.Phoenix.Roles.ActionGroup.action_group>
<:lead
action="primary-action"
id="role-inert-control-send"
label="More ways to send"
variants={[
Kit.Phoenix.Menu.group([
Kit.Phoenix.Menu.item("Send and mark as paid"),
Kit.Phoenix.Menu.item("Schedule sending…")
])
]}
action_state={Kit.Phoenix.ActionState.inert("send-invoice", "Add the customer's email before sending.")}
>Send invoice</:lead>
<:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Save as draft</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
</Kit.Phoenix.Roles.ActionGroup.action_group>
<p class="specimen-case-line">Two actions inert for one reason share one line.</p>
<Kit.Phoenix.Roles.ActionGroup.action_group>
<:lead action="primary-action" action_state={Kit.Phoenix.ActionState.inert("submit-claim", "Add a receipt for the taxi fare before submitting.")}>Submit claim</:lead>
<:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.covered("receipts-uploading")}>Duplicate claim</:secondary>
<:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.covered("receipts-uploading")}>Export as PDF</:secondary>
<:reason id="receipts-uploading">Duplicate claim and Export as PDF wait until the receipts finish uploading.</:reason>
</Kit.Phoenix.Roles.ActionGroup.action_group>
<p class="specimen-case-line">A region's standing describes the actions it makes inert; an action outside it keeps its own words.</p>
<Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Hall booking">
<:notices>
<Kit.Phoenix.Roles.Notice.notice state={Kit.Phoenix.Roles.Notice.State.settled()}>
<:standing>The hall calendar is syncing</:standing>
<:sentence rest={%{id: "booking-syncing"}}>The date and room can't be changed while the hall calendar syncs.</:sentence>
</Kit.Phoenix.Roles.Notice.notice>
</:notices>
<:content>
<Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Organiser</:name><:value>Aisha Khan</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Room</:name><:value>Garden Room</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.ActionGroup.action_group>
<:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.covered("booking-syncing")}>Change date</:secondary>
<:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.covered("booking-syncing")}>Change room</:secondary>
</Kit.Phoenix.Roles.ActionGroup.action_group>
</:content>
</Kit.Phoenix.Roles.HeadedRegion.headed_region>
<Kit.Phoenix.Roles.ActionGroup.action_group>
<:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Email the organiser</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
<:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("download-booking-invoice", "The invoice is ready once the booking is paid.")}>Download invoice</:secondary>
</Kit.Phoenix.Roles.ActionGroup.action_group>
<p class="specimen-case-line">A page's standing describes every action it makes inert, wherever it stands.</p>
<Kit.Phoenix.Roles.Notice.notice state={Kit.Phoenix.Roles.Notice.State.settled()}>
<:standing>This invoice is paid</:standing>
<:sentence rest={%{id: "invoice-paid"}}>A paid invoice can't be edited, sent again or have its reminder withdrawn.</:sentence>
</Kit.Phoenix.Roles.Notice.notice>
<Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Oakmere Primary School invoice">
<:content>
<Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Amount</:name><:value words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "84.00")))]} />
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.ActionGroup.action_group>
<:lead action="primary-action" action_state={Kit.Phoenix.ActionState.covered("invoice-paid")}>Edit invoice</:lead>
<:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.covered("invoice-paid")}>Send again</:secondary>
</Kit.Phoenix.Roles.ActionGroup.action_group>
</:content>
</Kit.Phoenix.Roles.HeadedRegion.headed_region>
<Kit.Phoenix.Roles.Row.row>
<:subject href="#role-inert-control-inert">Payment reminder</:subject>
<:facts>Sends on <Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.day(reader(), ~D[2026-05-20])} /></:facts>
<:actions action="secondary-action" action_state={Kit.Phoenix.ActionState.covered("invoice-paid")}>Withdraw</:actions>
</Kit.Phoenix.Roles.Row.row>