Buttons

One primary .submit per screen. Everything else is a neutral .btn, a .secondary, a destructive .caution, or a .dashed “add” affordance.

Save Save and continue Cancel Delete Add a row Disabled

{# Primary action #}
{{ forms.submitButton({ label: "Save"|t("app") }) }}

{# Or the generic button macro with any class #}
{{ forms.button({
    label: "Delete"|t("app"),
    class: "caution",
    spinner: true,
}) }}

HTML output

<button type="submit" class="btn submit">
  <div class="inline-flex">
    <div class="label">Save</div>
  </div>
</button>

Sizes & groups

Small Default Big

List Cards Table

{{ forms.buttonGroup({
    name: "viewMode",
    value: "list",
    options: [
        { label: "List",  value: "list" },
        { label: "Cards", value: "cards" },
        { label: "Table", value: "table" },
    ],
}) }}

Note

Icon buttons. Pass icon: "settings" (a Craft icon name) to forms.button. Craft renders an inline SVG inside .cp-icon. Add spinner: true to reserve space for a loading indicator on async actions.