Concorde UI component — Form actions. sonic-form-actions lays out form footer controls (submit, cancel) in a wrapping flex row with a 0.3rem gap. Place it inside sonic-form-layout, where it spans the full width, or at the end of any block Doc ID: core/components/ui/form/form-actions/form-actions. Keywords: Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form actions, UI component, form, sonic-form-actions, web component, 0.3rem, sonic-form-layout, justify, direction, justify-content, flex-start, flex-end, center. URL: https://concorde.supersoniks.org/core/components/ui/form/form-actions.

Form actions

sonic-form-actions lays out form footer controls (submit, cancel) in a wrapping flex row with a 0.3rem gap. Place it inside sonic-form-layout, where it spans the full width, or at the end of any block. Use justify and direction to arrange the controls.

Basic example

With no attributes, actions align to the start of the row.

<form>
      <sonic-form-layout>
        <sonic-input label="First name"></sonic-input>
        <sonic-input label="Last name"></sonic-input>
        <sonic-form-actions>
          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Check in</sonic-button>
          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
        </sonic-form-actions>
      </sonic-form-layout>
    </form>

Justify

justify is the CSS justify-content of the row (default flex-start). Use flex-end for dialog-style footers or center for toolbars.

<form>
      <sonic-form-layout>
        <sonic-input label="First name"></sonic-input>
        <sonic-input label="Last name"></sonic-input>
        <sonic-form-actions justify="flex-end">
          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
        </sonic-form-actions>
      </sonic-form-layout>
    </form>

Direction

direction is the CSS flex-direction (default row). row-reverse swaps the visual order but keeps the DOM and focus order.

<form>
      <sonic-form-layout>
        <sonic-input label="First name"></sonic-input>
        <sonic-input label="Last name"></sonic-input>
        <sonic-form-actions direction="row-reverse">
          <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
          <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
        </sonic-form-actions>
      </sonic-form-layout>
    </form>

Mixed controls

Any content can be slotted, such as a vertical sonic-divider. The default alignItems (center) keeps items of different heights aligned.

<form>
      <sonic-form-layout>
        <sonic-input label="First name"></sonic-input>
        <sonic-input label="Last name"></sonic-input>
        <sonic-form-actions justify="center">
          <sonic-button type="info" minWidth="12rem">
            <sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
            Previous step
          </sonic-button>
          <sonic-divider vertical></sonic-divider>
          <sonic-button type="info" minWidth="12rem">
            <sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
            Next step
          </sonic-button>
        </sonic-form-actions>
      </sonic-form-layout>
    </form>

API reference