Actions & placement

Where an action sits tells the user what it does before they read it. These rules make placement predictable across every Novus product: progression anchors right, context anchors left, danger stands apart, and there is only ever one primary.

The rules

• One primary per view. A single accent-filled button carries the main intent; everything else is secondary or ghost. Two primaries compete and both lose.
• Forms lead with the primary on the left. At the end of a page-level form, the primary sits first (left-aligned with the fields the eye just travelled down), with secondary actions after it. The eye lands on it naturally at the end of the fill-in path.
• Dialogs and wizards anchor the primary far-right. In a modal footer or wizard bar, the confirming action sits far-right (the direction of progression), Cancel directly to its left, and Back far-left. Users hit the corner without reading.
• Destructive actions stand apart. Use the danger variant, place it far-left in a footer (opposite the safe path), and never adjacent to the confirm button: distance prevents misclicks that words cannot.
• Toolbars: work on the left, view on the right. Bulk and creation actions start the row; filters, density, and export controls end it.

Form footer

<div style="max-width:24rem">
  <div class="field"><label for="ap-name">Merchant name</label><input class="input" id="ap-name" value="Hillcrest Grocers"></div>
  <div class="row">
    <button class="btn btn--primary">Save merchant</button>
    <button class="btn btn--ghost">Cancel</button>
  </div>
</div>

Dialog footer

<div class="card" style="max-width:32rem">
  <h3>Close terminal T-0311?</h3>
  <p class="muted">Open transactions will settle before shutdown.</p>
  <div class="row" style="justify-content:space-between">
    <button class="btn btn--danger">Decommission</button>
    <span class="row">
      <button class="btn btn--ghost">Cancel</button>
      <button class="btn btn--primary">Close terminal</button>
    </span>
  </div>
</div>

Wizard bar

<div class="row" style="justify-content:space-between;max-width:32rem">
  <button class="btn btn--ghost">‹ Back</button>
  <button class="btn btn--primary">Next: Review ›</button>
</div>

Spacing between actions

• Actions sit on a .row, which spaces them with var(--space-3): that is the standard button gap.
• Bare sibling buttons outside a .row still get an automatic var(--space-2) gap from the kit's fallback rule, so buttons never touch, but reach for .row first.
• Never add ad-hoc pixel margins between buttons; the two gaps above are the whole system.