Form actions

wu-form-actions is the row of buttons at the end of a form. It is start-aligned by default and wraps when narrow.

Class	Effect
`wu-form-actions`	Root. Wrapping row of buttons
`wu-form-actions-end`	Part. Pushes a set of buttons to the end
`trailing`	Aligns the whole row to the end
`centered`	Centers the row
`divided`	Line and padding above the row

Start-aligned

<div class="wu-form-actions">
  <button class="wu-btn brand" type="submit">Save</button>
  <button class="wu-btn" type="button">Cancel</button>
</div>

End group

<div class="wu-form-actions divided">
  <button class="wu-btn" type="button">Delete</button>
  <div class="wu-form-actions-end">
    <button class="wu-btn" type="button">Cancel</button>
    <button class="wu-btn brand" type="submit">Save</button>
  </div>
</div>

Trailing and centered

<div class="flex col gap-4">
  <div class="wu-form-actions trailing">
    <button class="wu-btn" type="button">Back</button>
    <button class="wu-btn brand" type="submit">Continue</button>
  </div>
  <div class="wu-form-actions centered">
    <button class="wu-btn brand" type="submit">Create account</button>
  </div>
</div>

Right to left

Start-aligned rows start on the right; trailing and the end group move to the left.

<div class="wu-form-actions divided">
  <button class="wu-btn" type="button">حذف</button>
  <div class="wu-form-actions-end">
    <button class="wu-btn" type="button">إلغاء</button>
    <button class="wu-btn brand" type="submit">حفظ</button>
  </div>
</div>

Load only the form actions

@use "@wovenui/components/form-actions";

The form actions need no other component. The examples above also use the button.