kit

Primary action

Built revision v17.10.0

React
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
@react.component
let make = () =>
  <>
    <KitReact.Roles.PrimaryAction icon=KitReact.Icons.iconArrowRight>
      {React.string("Save changes")}
    </KitReact.Roles.PrimaryAction>
    <p>{React.string("An action can carry its label without an icon.")}</p>
    <KitReact.Roles.PrimaryAction>{React.string("Save contact")}</KitReact.Roles.PrimaryAction>
    <p>{React.string("An action that opens another view is a link.")}</p>
    <KitReact.Roles.PrimaryAction href="#role-primary-action">
      {React.string("Edit billing contact")}
    </KitReact.Roles.PrimaryAction>
    <p>{React.string("An action that cannot act yet is disabled, its reason beside it.")}</p>
    <KitReact.Roles.ActionGroup lead=PrimaryAction({children: React.string("Send invoice"), state: KitReact.ActionState.Disabled({id: "send-invoice", words: [KitReact.Words.Text("Add the hirer’s email before sending.")]})}) />
  </>

Primary action, submitting

Source
@react.component
let make = () =>
  <>
    <KitReact.Roles.PrimaryAction
      icon=KitReact.Icons.iconArrowRight
      submitting=true
    >
      {React.string("Save changes")}
    </KitReact.Roles.PrimaryAction>
  </>